[JS] 이벤트 버블링, 캡처링,위임

이벤트 버블링

하위 Element에 이벤트가 발생했을 때 그 Element부터 시작해서 상위 Element까지 이벤트가 전달되는 방식.

Default로 적용되어있다.

document.querySelector('li').addEventListener('click', () => console.log('li 클릭'));
document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'));
document.querySelector('div').addEventListener('click', () => console.log('div 클릭'));

result : 
li 클릭
ul 클릭
div 클릭

이벤트 캡처링

이벤트 버블링과 반대되는 개념으로 하위 Element에 이벤트가 있을 때 상위 Element부터 하위 Element로 이벤트가 전달되는 방식.

<div>
  <ul>
    <li>예시</li>
  </ul>
</div>

<script>
  document
    .querySelector("li")
    .addEventListener("click", () => console.log("li 클릭"));
  document
    .querySelector("ul")
    .addEventListener("click", () => console.log("ul 클릭"), { capture: true });
  document
    .querySelector("div")
    .addEventListener("click", () => console.log("div 클릭"));
</script>

result : 
li 클릭
ul 클릭
div 클릭

이벤트 위임

이벤트 위임 이란 하위 엘리먼트들이 여러개 있을 때, 하위 엘리먼트들에 각각 이벤트 핸들러를 달지 않고 상위 엘리먼트에 이벤트 핸들러를 달아 하위 엘리먼트들을 제어하는 방식이다. 이 패턴으로 얻는 이점들은 다음과 같다.

• 동적으로 엘리먼트를 추가할 때마다 핸들러를 고려할 필요가 없다.
• 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되기 때문에 코드가 훨씬 깔끔해진다.
• 메모리에 있게되는 이벤트 핸들러가 적어지기 때문에 퍼포먼스 측면에서 이점이 있다.

예시를 살펴보자.

<ul onclick="alert(event.type + '!')">
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>

li 에 각각 핸들러를 달지 않고 상위 엘리먼트인 ul 에만 달았다는 걸 확인할 수 있다. 무조건 이벤트 위임이 좋은 것은 아니기 때문에 상황에 맞게 잘 사용하도록 하자.

참고