[JavaScript] Event.currentTarget

Event.currentTarget 이란?

버블링과 캡처링에 대해 공부하면서 나오게 된 것이다

현재 이벤트 핸들러가 할당된 요소에 대한 정보를 얻게 해준다

이벤트 버블링에 의해 최상단 요소까지 이동하면서 핸들러가 동작할 때 사용하면 현재 어떤 이벤트 핸들러가 동작하고 있는 것인지 확인할 수 있게 된다

사진은 div > span > p 태그로 구성한 것이며, 각 태그마다 클릭 이벤트로 alert 창이 뜨게끔 이벤트 핸들러를 부여한 상태이다

p 태그 영역을 클릭하게 되면 이벤트 버블링에 의해 3개의 alert 가 뜨게 되는데

이렇게 클릭한 태그와 다르게 버블링에 의해 실행되는 이벤트 핸들러가 위치한 태그 정보를 반환해주는 것을 확인할 수 있다

이 부분에 대한 코드는 https://github.com/jinyoong/TIL/tree/master/JavaScript/bubbling_and_capturing
에서 확인할 수 있다!

주의할 점

실습을 하면서 setTimeout() 을 이용해서 클릭 영역을 파란색으로 강조해주었다.

그런데 setTimeout() 은 Web API 의 하나라서 콜백 큐를 거쳐 콜 스택에 다시 들어오게 된다

그래서 setTimeout() 내부에 event.currentTarget 에 접근할 때는 null 이 나오게 되어서 한참 고민했었다

즉, 비동기 동작에 사용하게 되면 null 을 얻게 되니까 이 점에 유의해서 사용해야 한다!