Instagram 클론코딩을 진행하면서 나를 많이 괴롭혔던(?) 그래서 많이 배웠던 몇 가지에 대해 정리해 보고자한다 😭
그 중 하나가 바로 event.target 이였다!
1. event.target이란?
event handler는 이벤트 객체를 인수로 전달 받을 수 있다.
그리고event.target;은 이벤트가 일어날 객체를 의미한다.
예를 들어, 버튼을 누르면 새로운 창이 열리는 객체가 있다고 하자. 그렇다면 여기서 버튼은 event target이 된다. (여기까지는 나도 알고 있는 부분이였다)
문제는 좋아요 버튼을 만들면서 생겼다. 좋아요 버튼은 클릭함에 따라 비어있는 하트와 꽉 찬 하트가 번갈아 나오는 버튼이다. 따라서 나는 비어있는 하트 이미지와 꽉 찬 하트 이미지를 같은 위치에 놓고 visibility를 이용하여 번갈아 보이게 만들 생각이였다.
해당 부분의 코드는 다음과 같았다.
<div class= "likeIconCon">
<img class="" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">
<img class= "visibility" src="./img/heart.png">
</div>그리고 div.likeIconCon을 객체화 시킨 뒤, addEventListner를 통해 클릭을 하면 이벤트 핸들러가 작동하도록 만들 생각이였다.
내 생각으로는 div.likeIconCon에 addEventListner 메소드를 이용했기 때문에 당연히 event.target;은 div.likeIconCon이 될 것이라 생각했지만, 아니였다🙅 오마갓!!! console에 찍히는 event.target;은 div.likeIconCon 안의 이미지 태그를 가져오고 있었다.
이 문제를 해결한 것이 바로 event.currentTarget; 이다.
event.target; 과 event.currentTarget;의 차이점은?
👉 event.target;
event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다.
👉 event.currentTarget;
event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환한다.
따라서 나는 event.currentTarget을 이용해 div.likeIconCon을 가져올 수 있었고, 이를 통해 img태그들을 children으로 모두 가져올 수 있었다.
문제 해결!!! 🙆
