JavaScript에서 반드시 알아야 할 e.target 설명

HTML 요소에 이벤트를 첨부하면 이벤트가 트리거될 때 이벤트 객체를 반환합니다.

트리거된 이벤트는 클릭, 마우스 오버, 마우스 다운 등일 수 있습니다.

이벤트 객체(e)의 대상 속성은 이벤트가 트리거되는 현재 HTML 요소를 제공합니다.

실제로 그것을 보자.

Get Current HTML Element Using e.target

Get Child Element Using e.target

Get Parent Element Using e.target

e.target을 사용하여 클릭된 HTML 요소 가져오기

연결된 이벤트가 트리거될 때 HTML 요소에 액세스하는 방법을 살펴보겠습니다.

HTML 요소 만들기

이벤트를 첨부합니다

.

이벤트 트리거

이벤트 콜백 함수 내에서 반환된 이벤트 객체를 캡처합니다

.

이벤트 객체의 대상 속성에 액세스하여 현재 HTML 요소를 가져옵니다

.

HTML 버튼 요소 정의

<button id="button">Button</button>

ID 속성을 사용하여 버튼 요소에 대한 DOM 참조를 만듭니다.

const button = document.getElementById('button');

버튼 객체에서 addEventListener() 메서드를 호출하여 버튼 요소에 이벤트를 연결합니다.

button.addEventListener();

addEventListener()는 다음과 같은 두 가지 기본 인수를 사용합니다.

클릭 → 이벤트 이름

buttonPressed → 클릭 이벤트 발생 시 호출되는 콜백 함수

button.addEventListener("click", buttonPressed);

콜백 함수 buttonPressed()를 선언합니다.

const buttonPressed = () => {
  console.log("I'll be called every time when a button is pressed")
}

버튼에서 클릭 이벤트가 트리거될 때마다 buttonPressed() 함수가 호출됩니다.

콜백 함수 내에서 클릭된 요소 캡처/받기

사용자가 버튼을 누를 때마다 HTML 요소를 이벤트 객체로 반환합니다.

반환된 이벤트 개체는 e라는 매개 변수로 buttonPressed() 콜백 함수에 전달됩니다.

const buttonPressed = (e) => {
  console.log(e); //short form of event
}

이벤트 개체의 target 속성을 사용하여 현재 클릭된 HTML 요소(이 경우에는 버튼)를 가져옵니다.

const buttonPressed = (e) => {
  console.log(e.target); //<button id="open-modal">Open Modal Window</button>
}

e.target을 사용하여 클릭된 하위 요소 가져오기

이벤트의 상위 요소가 트리거될 때 e.target을 사용하여 하위 요소를 가져오는 방법을 알아보세요.

id 버튼 그룹이 있는 샘플 래퍼 ​​div에는 내부에 4개의 버튼 요소가 있습니다.

<div id="button-group">
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
   <button>Button 4</button>
</div>

각 버튼 대신 래퍼 div에 클릭 이벤트를 연결합니다.

const buttonGroup = document.getElementById("button-group");

const buttonGroupPressed = (e) => {
    console.log(e.target); // Get any clicked element inside button-group wrapper div
}

buttonGroup.addEventListener('click', buttonGroupPressed);

e.target은 현재 클릭된 HTML 요소를 반환하며, 이는 부모(#button-group) 또는 자식 요소(내부 버튼)일 수 있습니다.

상위 요소는 연결된 클릭 이벤트가 있는 요소를 참조합니다.

이 경우 래퍼 div(div#button-group)입니다.

이벤트 객체(e.currentTarget)의 currentTarget 속성과 달리 부모 또는 자식 요소를 클릭했는지 여부에 관계없이 부모 요소만 반환합니다.

e.target을 사용하여 클릭된 상위 요소 가져오기

연결된 이벤트가 있는 자식 요소가 트리거될 때 부모 요소를 가져오는 방법을 알아봅니다.

래퍼 div 요소에는 버튼인 하나의 자식 요소가 있습니다.

<div id="button-group">
   <button id="button">Button</button>
</div>

버튼에 클릭 이벤트를 연결하고 클릭하면 e.target의 parentNode 속성을 사용하여 부모 요소를 가져옵니다.

const button = document.getElementById("button");

const buttonPressed = (e) => {
    console.log(e.target.parentNode); // <div id="button-group">...</div>
}

button.addEventListener('click', buttonPressed);

e.target을 사용하면 HTML 요소의 속성 중 하나를 가져오거나 설정하는 것과 같은 추가 조작을 위해 연결된 이벤트가 트리거될 때 현재 클릭된 HTML 요소를 가져올 수 있습니다.