JavaScript 이벤트 처리에서 `currentTarget`과 `target`의 차이점은 무엇입니까?

JavaScript 이벤트에서 currentTarget과 target 속성 구별

JavaScript에서 이벤트를 처리할 때 currentTarget과 target 사이의 구별을 이해하는 것이 중요합니다. 속성. 이러한 속성은 이벤트 전파 메커니즘에 대한 귀중한 통찰력을 제공하고 다양한 시나리오에서 중요한 역할을 합니다.

이벤트 전파 및 속성 차이점

기본적으로 JavaScript의 이벤트는 버블링을 따릅니다. 전파 모델. 즉, 이벤트는 특정 요소에서 시작되어 문서 개체에 도달할 때까지 상위 요소를 통해 위쪽으로 전파됩니다. 이 전파 중에 대상 속성은 처음에 이벤트를 트리거한 요소를 참조하고, currentTarget 속성은 이벤트 리스너가 연결된 요소를 식별합니다.

예

두 개의 중첩된 div가 포함된 HTML 문서를 생각해 보세요.

<div>

이제 외부 div에 이벤트 리스너를 연결합니다. div:

document.getElementById("div-container").addEventListener("click", function(event) {
  console.log(`Target: ${event.target.id}, CurrentTarget: ${event.currentTarget.id}`);
});

내부 div를 클릭하면 target 및 currentTarget 속성 모두 "div-inner"를 출력하여 이벤트가 내부 div에서 발생했음을 나타냅니다. 그러나 외부 div를 클릭하면 이벤트 리스너가 외부 div에 연결되어 있으므로 currentTarget 속성은 여전히 ​​"div-container"를 출력하는 반면 클릭 이벤트가 외부 div에서 직접 트리거되지 않았기 때문에 대상 속성은 null이 됩니다. div.

사용 사례

사용 사례 target:

• 이벤트를 발생시킨 특정 요소 식별
• 중첩 구조의 특정 요소로 이벤트 처리 제한
• 에서 요소의 정확한 위치 결정 페이지

사용 currentTarget:

• 이벤트 리스너가 연결된 요소 결정
• 추가 버블링을 중지하거나 추가 이벤트를 캡처하여 이벤트 전파 제어
• 이벤트 위임 구현 단일 이벤트 리스너로 여러 요소의 이벤트 처리

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