이벤트 위임

- 이벤트 위임 :  JavaScript에서 이벤트 처리를 최적화하고 성능을 향상시키는 패턴 중 하나입니다. 이 패턴은 일반적으로 이벤트가 여러 DOM 요소에 연결되어 있을 때 유용하게 사용된다.

- 이벤트 위임의 핵심 아이디어는 이벤트를 여러 개의 하위 요소에 직접 연결하는 대신, 상위(부모) 요소에 하나의 이벤트 핸들러를 연결하고, 그 상위 요소에서 발생한 이벤트를 각 하위 요소에 대한 조건부 처리를 통해 다루는 것이다.

 

- 이벤트 전파 : DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것

버블링

- 버블링 : 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식

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

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

- 위와 같은 상황에서 li태그를 클릭하게 되면 "li 클릭" -> "ul 클릭" -> "div 클릭" 순서로 출력된다.

- 즉, li, ul, div 태그의 이벤트 핸들러는 모두 버블링 단계에서 캐치되어 등록된 이벤트가 실행된다.

- 이벤트 핸들러의 기본 동작 방식은 "버블링"이며, 캡쳐링으로 변경하기 위해서는 addEventListener의 마지막 인자로 { capture : true }를 전달해주면 된다.

 

캡처링

- 캡쳐링 : 하위 엘리먼트에 이벤트 핸들러가 있을 때, 상위 엘리먼트부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식

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

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

- 위와 같은 상황에서 li 태그를 클릭하게 되면 "div 클릭" -> "ul 클릭" -> "li 클릭" 순서로 출력된다.

- 즉, li, ul, div 태그의 이벤트 핸들러는 모두 캡처링 단계에서 캐치되어 등록된 이벤트가 실행된다.

 

* 이벤트 위임의 장점

- 동적으로 엘리먼트를 추가할 때마다 이벤트 핸들러를 고려할 필요가 없다.

- 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되기 때문에 코드가 훨씬 깔끔해진다.

- 메모리에 있게 되는 이벤트 핸들러가 적어지기 때문에 메모리 사용이 줄어든다.

---

* 정리

- 이벤트 위임은 JavaScript에서 이벤트 처리를 최적화하고 성능을 향상시키는 패턴 중 하나이며 일반적으로 이벤트가 여러 DOM 요소에 연결되어 있을 때 유용하게 사용된다. 이벤트 위임은 이벤트 전파를 이용하여 이벤트를 여러 개의 하위 요소에 직접 연결하는 대신 상위(부모)요소에 하나의 이벤트 핸들러를 연결하고, 그 상위 요소에서 발생한 이벤트를 각 하위 요소에 대한 조건부 처리를 통해 다루는 것이다.

 

- 이벤트 위임의 장점으로는 동적으로 엘리먼트를 추가할 때마다 이벤트 핸들러를 고려할 필요가 없고, 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되기 때문에 코드가 깔끔해지며, 메모리에 있게 되는 이벤트 핸들러가 적어지기 때문에 메모리 사용이 줄어든다는 점이다.