currentTarget vs target 의 차이점 자바스크립트

자바스크립트에서 e.currentTarget와 e.target의 차이점에 궁금한 사항이 있어서 포스팅합니다.

자바스크립트 이벤트는 엘리먼트간에 전파됩니다.(버블링의 경우 제일 안쪽부터 바깥으로, 캡쳐링의 경우 바깥에서 안쪽으로) 일단 그렇게만 알고 계세요. 더 들어가면 복잡해져요 ㅋㅋ.

currentTarget vs target 차이점

currentTarget : 이벤트를 등록해 놓은 요소를 반환한다.
target :  이벤트가 발생한 요소를 반환한다.

<div id="mydiv"> <p>나는 나다</p> <a href="#">우리나라</a> </div>
Code language: HTML, XML (xml)
const myDiv = document.getElementById('mydiv'); myDiv.addEventListener('click',(e)=>{ console.log('currentTarget : ',e.currentTarget.tagName) console.log('target : ',e.target.tagName) });
Code language: JavaScript (javascript)

위와 같이 예를 들어 설명하면 더 쉽다.

currentTarget는 이벤트를 등록한 요소이기 때문에 listener를 붙여놓은 div태그가 된다.

target는 이벤트가 발생한 요소이다. 만약 “나는 나다”를 클릭하면 p태그가 target가 되는 것이고, 만약 “우리나라”를 클릭하면 a태그가 target가 되는 것이다.

currentTarget vs target 결과화면 p 클릭했음

답글 남기기

17 + 6 =