JavaScript 이벤트의 currentTarget과 target: 차이점은 무엇입니까?

JavaScript 이벤트의 currentTarget과 target 비교: 차이점 파악

JavaScript 이벤트 처리 영역에서 currentTarget과 target의 차이점 이해 대상 속성이 중요합니다. 예제를 통해 차이점을 자세히 살펴보겠습니다.

대상 속성 탐색

대상 속성은 이벤트를 직접 트리거한 요소를 나타냅니다. 다음 시나리오를 고려하십시오.

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

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

이 예에서 버튼을 클릭하면 e.target은 클릭 이벤트를 시작한 요소이므로 버튼 자체를 참조합니다.

currentTarget 속성 소개

target이 이벤트 개시자를 가리키는 반면 currentTarget 이벤트 핸들러가 연결된 요소를 나타냅니다. 이전 코드를 수정해 보겠습니다.

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

이 경우 e.currentTarget은 클릭 이벤트가 내부 버튼에서 발생하더라도 래퍼 div를 참조합니다. 이는 이벤트 리스너가 래퍼에 연결되어 이를 제어 요소로 만들기 때문입니다.

올바른 속성 선택: 시나리오 기반 가이드

• 다음의 경우 대상을 사용하세요. непосредственно로 인해 발생한 요소에 대한 정보에 액세스해야 합니다.
• 다음의 경우 currentTarget을 사용하세요. 해당 요소의 계층 구조 내에서 이벤트가 발생한 위치에 관계없이 이벤트 핸들러가 연결된 요소로 작업하려는 경우.

위 내용은 JavaScript 이벤트의 currentTarget과 target: 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!