event.target을 사용하여 요소 상위 요소를 타겟팅 할 수 있습니까?

event.target을 사용하여 요소 상위 요소를 타겟팅 할 수 있습니까?

---

내 페이지의 innerHTML을 클릭 한 요소의 innerHTML이되도록 변경하려고합니다. 유일한 문제는 다음과 같은 전체 요소를 가져 오기를 원한다는 것입니다.

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>

내가 자바 스크립트로 작성한 코드는 다음과 같습니다.

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

클릭 한 특정 요소를 타겟팅합니다.

내가 달성하고 싶은 것은 <section>요소의 아무 곳 이나 클릭하면 클릭 한 특정 요소가 아닌 전체 요소의 innerHTML을 가져옵니다.

클릭 한 항목의 부모 요소를 선택하는 것과 관련이 있다고 가정하지만 확실하지 않으며 온라인에서 아무것도 찾을 수 없습니다.

가능하다면 JQuery를 멀리하고 싶습니다.

---

필요한 것은 event.currentTarget. 여기에는 실제로 이벤트 리스너가있는 요소가 포함됩니다. 따라서 전체 <section>에 eventlistener event.target가있는 경우 클릭 된 요소 <section>가되며 event.currentTarget.

그렇지 않으면 parentNode당신이 찾고있는 것일 수 있습니다.

currentTarget에 대한
링크 parentNode에 대한 링크

---

요소의 부모를 사용하려면 다음을 사용하십시오 parentElement.

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}

---

function getParent(event)
{
   return event.target.parentNode;
}

예 : 1. document.body.addEventListener("click", getParent, false);클릭 한 현재 요소의 상위 요소를 반환합니다.

2. 함수 내에서 사용하려면 이벤트를 전달하고 다음과 같이 함수를 호출하십시오. function yourFunction(event){ var parentElement = getParent(event); }

---

handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}

---

var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ;  i<_RemoveBtn.length ; i++){
    _RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
    console.log(event.currentTarget.parentNode);    
}

참고 URL : https://stackoverflow.com/questions/29168719/can-you-target-an-elements-parent-element-using-event-target