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

JavaScript: 이벤트 처리에서 CurrentTarget과 Target 속성의 차이점 공개

JavaScript 이벤트 처리 영역에서 currentTarget 및 target 속성은 이벤트 전파를 이해하는 데 있어 서로 다른 역할을 수행합니다. 메커니즘.

정의:

• 대상: 이벤트를 시작한 직접적인 요소를 나타냅니다. 이는 일반적으로 클릭이나 마우스 오버 등의 트리거 동작이 시작된 요소입니다.
• currentTarget: 이벤트 리스너가 연결된 요소를 나타냅니다. 이는 이벤트 버블 경로의 현재 요소를 나타냅니다.

이벤트 버블링 및 캡처:
이벤트는 JavaScript의 기본 버블링 동작을 따릅니다. 이는 내부 요소에서 트리거된 이벤트가 DOM 트리를 상위 요소로 전파(버블링)한다는 의미입니다.

속성 역할:
이벤트 전파 중에 currentTarget과 target 모두 귀중한 정보 제공:

• 대상: 전파 단계에 관계없이 원래 이벤트를 발생시킨 요소입니다.
• currentTarget: 이벤트가 DOM 계층 구조 위로 올라오면서 동적으로 업데이트됩니다. 이벤트 리스너가 현재 처리되고 있는 요소를 가리킵니다.

시나리오 및 사용 사례:

• 이벤트 전파 제어:

  • 캡처하여 상위 요소의 이벤트(이벤트 캡처)에서 currentTarget은 항상 상위 요소를 참조하고 대상은 이벤트를 트리거한 하위 요소를 나타냅니다.
  • 이벤트를 문서 객체에 버블링하여(이벤트 버블링) , currentTarget과 target은 모두 전체에서 동일한 요소로 정렬됩니다.

• 요소 격리:

  • currentTarget을 사용하면 리스너를 연결하여 특정 요소에 이벤트 처리를 격리할 수 있습니다. 그들의 부모 요소. 이벤트를 시작한 요소는 여전히 대상 속성을 통해 식별할 수 있습니다.

예:

const parent = document.querySelector(".parent");
parent.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget); // Parent element
  console.log("target:", event.target); // Clicked child element
});

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