JavaScript event.target와 event.currentTarget 차이 쉽게 익히기

JavaScript event.target와 event.currentTarget 차이 쉽게 익히기

 

 

JavaScript에서 이벤트 처리 중 두 가지 주요 속성인 event.target과 event.currentTarget은 이벤트 핸들러에서 요소를 지정하고 식별하는 데 중요한 역할을 합니다. 이 글에서는 두 속성의 차이를 설명하고 예시 코드를 통해 보다 쉽게 이해하도록 하겠습니다.

 

 

event.target : 이벤트의 실제 목표 요소

 

javascript 함수선언문과 함수표현식 소개, 특징, 차이점, 예시

 

event.target 속성은 이벤트가 실제로 발생한 목표 요소를 나타냅니다. 즉, 사용자의 상호작용이 시작된 요소입니다.

 

예시 코드

document.getElementById("부모요소").addEventListener("click", function (이벤트) {
    alert("클릭한 요소: " + 이벤트.target.id);
});

 

위 코드에서, 클릭한 요소의 id를 event.target을 통해 가져와서 출력합니다. 클릭한 요소가 실제로 목표 요소이기 때문에 event.target은 클릭한 요소를 가리킵니다.

 

 

event.currentTarget : 현재 이벤트 핸들러가 연결된 요소

 

JavaScript 함수와 메서드 개념, 차이, 활용, 예시코드

 

event.currentTarget 속성은 현재 이벤트 핸들러가 연결된 요소를 나타냅니다. 이것은 이벤트 핸들러의 컨텍스트와 관련이 있으며, 핸들러 함수를 호출하는 요소를 가리킵니다.

 

예시 코드

document.getElementById("부모요소").addEventListener("click", function (이벤트) {
    alert("현재 핸들러 요소: " + 이벤트.currentTarget.id);
});

 

위 코드에서, 이벤트 핸들러가 연결된 요소의 id를 event.currentTarget을 통해 가져와서 출력합니다. 이벤트 핸들러가 연결된 요소와 목표 요소가 동일하지 않을 수 있습니다.

 

 

event.target과 event.currentTarget의 차이

 

JavaScript Falsy한 값과 Truthy한 값 소개, 특징, 예시 코드

 

두 속성의 주요 차이점은 이벤트가 어떻게 전파되는지와 관련이 있습니다. event.target은 이벤트의 목표 요소를 가리키고, 이 요소에서 이벤트가 시작됩니다. 반면에, event.currentTarget은 현재 이벤트 핸들러가 연결된 요소를 가리킵니다.

 

예를 들어, 버튼 내부의 텍스트를 클릭할 때, event.target은 텍스트 노드를 가리키고, event.currentTarget는 버튼 요소를 가리킵니다. 이러한 차이를 이해하면 이벤트 핸들링을 더욱 정확하게 제어할 수 있습니다.

 

 

끝으로

 

이제 event.target과 event.currentTarget의 차이를 이해했으므로, 웹 애플리케이션에서 더 복잡한 이벤트 처리 작업을 수행할 때 이 두 속성을 적절하게 활용할 수 있을 것입니다.

 

▼ 아래 글도 읽어보세요! ▼

 

인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강

 

JavaScript 실시간 시계 - 소스 코드 제공

 

javascript 변수 선언 방법 3가지 특징, 비교 (var, let, const)