event.target VS event.currentTarget

event.target VS event.currentTarget

🎵event.target

이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환 (즉 더 세밀하게 클릭된 요소를 기준으로 사용할 때)

(event.target은 내가 이벤트를 건 대상만 발생하는 것이 아니라 그 자식(후손)도 될 수 있다)

 

🎶event.currentTarget

이벤트가 바인딩된 요소를 반환한다.

---

🎀 예시

 

이런 코드가 있다고 하면, 나는 div 태그를 클릭했을 때 삭제 작업을 진행하고 싶은 경우div태그에 onclick 이벤트리스너를 추가했다하더라도, 내가 아이콘 부분을 누르면 event.target은 div태그가 아니라 i태그가 event.target이 된다.

이것을 해결하기 위해서는 event.currentTarget을 사용하면 된다.

 

참고한 사이트

https://webisfree.com/2017-09-06/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-event-target-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EC%99%80-currenttarget-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80