[4주차 위클리페이퍼] 이벤트 버블링, 캡쳐링, 위임

 

이벤트 캡쳐링

 

이벤트 캡쳐링은 이벤트 호출 과정에서 가장 먼저 발생하는 과정으로, 이벤트가 발생했을 때 window 객체에서부터 이벤트 대상인 target까지 전파되는 과정이다.

const colorBtn = document.querySelector(".btn");

const changeColorHandler = () => {
  colorBtn.style.backgroundColor = "blue";
}

colorBtn.addEventListener("click", changeColorHandler);

 

위 코드를 실행하면 버튼의 배경색이 파란색으로 바뀌는데, 클릭이벤트가 실행되면 클릭과 동시에 실행되는 것처럼 보이지만 사실 캡쳐링 과정을 선행하여 target인 colorBtn 요소까지 도달한 후 실행이 된 것이다.

 

이벤트 버블링

 

이벤트 버블링은 캡쳐링과 반대되는 방향, 즉 target에서 window 객체로 이벤트가 전파되는 과정이다. 위 코드에서 addEventListener 메서드를 사용할 때 세 번째 매개변수를 생략하면 기본값이 false이기 때문에 버블링 단계에서 호출된다. 

💡 addEventListener의 세 번째 매개변수는 useCapture인데, 이벤트 대상의 DOM 트리 하위에 있는 자식인 target으로 이벤트가 전달되기 전에 이벤트리스너가 실행할지의 불리언 값이다. 생략하면 false가 기본값이며, true로 지정하면 이벤트가 캡쳐링 단계에서 처리된다.

 

즉, 이벤트가 실행될 때 캡쳐링 ➡ 이벤트 요소(target) ➡ 버블링 순으로 이벤트가 진행되는 것이다.

 

이벤트 버블링이 발생하면 부모 요소에서도 이벤트를 감지할 수 있다. 그래서 이벤트핸들러를 부모 요소에 놓으면 자식 요소에서 발생한 이벤트를 모두 처리할 수 있다. 

 

버블링을 막으려면 event 객체의 stopPropagation 메서드를 활용하여 전파를 중지할 수 있다.

 

이벤트 위임

 

이벤트 위임은 이벤트 버블링을 활용하여 구현할 수 있는데, 이벤트 리스너를 자식 요소마다 지정하는 대신 자식 요소들을 감싸고 있는 부모 요소에만 적용하여 이벤트를 처리하는 방법이다.

<ul className="itemList">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

 

위 예시코드에서 ul 태그 안에 있는 li 태그들에 있는 텍스트들을 추출하는데에 li 태그들에 이벤트 리스너를 적용하는 것 대신 ul 태그에 한번 적용하는 것이다.

 

이벤트 위임을 구현하면 이벤트를 좀 더 효율적으로 관리할 수 있다는 장점이 있다.