JS로 프로젝트를 진행하던 도중 e.target이 내 생각과는 다르게 연결되어 찾아보게 되었다.

HTML

  <button class="clipboardButton">
    <svg></svg>
  </button>

Javascript

const clipboardButtonList = document.querySelectorAll(".clipboardButton");

clipboardButtonList.forEach((item, idx) => {
    item.addEventListener("click", (e) => {
        console.log(e.target);
    })
})

내가 의도한 바로는 사용자가 버튼 엘리먼트를 클릭하면 클릭한 버튼 엘리먼트를 콘솔에 출력하도록 한 것인데.

이와 같이 button엘리먼트가 아니라 하위 엘리먼트인 svg 엘리먼트가 나왔다..

왜?

대략 찾아본 바로는 자바스크립트의 이벤트 버블링이 원인이라고 추측되어서 이벤트 버블링에 대해서 공부해 봤다.

이벤트 버블링

이벤트 버블링이란, 특정 이벤트가 발생 했을 때 해당 이벤트가 발생한 요소에서 그 이벤트가 끝나는 것이 아니라, 상위 요소로 해당 이벤트가 전달되는 현상을 말한다.

하위 요소에서 발생한 이벤트를 상위 요소에게도 전달해 주는것.

위 3가지 div에는 전부 자신의 클래스 속성을 출력하는 이벤트 리스너가 연결되어 있다.

파란 영역이나 노란 영역을 클릭해 보면 , 해당 영역의 리스너 뿐만 아니라, 상위 요소에 연결된 리스너도 동작을 하는 모습을 볼 수 있다.

이러한 특성을 통해서 웹 페이지는 사용자와의 상호 작용을 원할하게 이룰 수 있다.

상호 작용?

평소에 개발하면서 당연하다고 여겼던 부분에도 이벤트 버블링이 적용되고 있겠구나 싶었다.

이처럼 버튼 안에 svg,p 같은 다른 요소 (예시에서는 div를 사용했다.)를 많이 사용하는데 사용자가 버튼의 배경을 여백을 클릭하든 버튼 내부의 아이콘이나 텍스트를 클릭해도 버튼의 이벤트 리스너는 동작을 한다.

이런 부분에서 이미 이벤트 버블링을 사용하고 있지 않았나 싶다.

e.target

보통 이벤트가 발생했을 때 리스너에서 e.target을 많이 이용했는데, 이벤트 버블링이 발생되어서 상위 요소로 전달된 e.target은 이벤트를 전달받은 요소가 아니라. 이벤트가 발생한 요소를 가르킨다.

이벤트 버블링 발생시 e.target은 이벤트가 발생한 요소를 가리키고 있다.

내가 겪던 문제의 원인

이 부분이 내가 겪던 문제의 원인이였다. 이벤트 버블링으로 전달된 이벤트의 경우 event.target은 처음 이벤트가 발생한 요소를 가지기 때문에,
의도했던 button 요소가 아니라 svg요소가 반환된 것이였다!

---

이벤트 위임

이벤트 버블링을 이용하면 자식 요소들 각각에 이벤트 핸들러를 연결하지 않고도, 부모 요소에 연결된 핸들러 하나를 통해서 자식 요소에서 발생하는 이벤트를 처리할 수 있다
이로 인해서 코드를 단순화 시킬 수 있고, 동적으로 생성되는 엘리먼트에 대한 이벤트 처리에 유용하게 사용할 수 있다.