JavaScript Event Delegation (이벤트 위임)

<Event Delegation (이벤트 위임)은 뭔가?>

자바스크립트에서 이벤트 위임은 각 요소에 이벤트를 설정하는 대신, 상위 부모 요소에 설정하여 비슷한 방식으로 여러 요소를 다루면서 코드량을 줄일 수 있고 코드 효율을 높입니다. 또한 공통 조상에 인벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다룰 수 있어 메모리 사용과 성능을 최적화할 수 있습니다.

 

 <이벤트 전파 : 이벤트 위임의 핵심>

이벤트 전파에는 세 가지 단계가 있습니다 : 캡처링 단계, 타겟 단계 그리고 버블링 단계입니다. 

이벤트 위임에서 버블링 단계를 활용합니다. 버블링 단계에서는 이벤트가 타겟 요소에서 시작하여 DOM 트리를 따라 상위로 전파됩니다. 자식 요소에서 발생한 이벤트가 부모 요소, 조부모 요소 등으로 전파되어 결국 최상위 문서 객체에 도달하게 됩니다. 

 

캡처링 단계와 타겟 단계는 무엇인가요?

캡처링 단계는 이벤트가 **최상위 요소(루트)**에서 시작해 타겟 요소에 도달하기 전까지 경로를 따라 내려가는 과정입니다.

타겟 단계는 이벤트가 실제로 발생한 요소에서 이벤트가 처리되는 순간을 말합니다. 마지막이 버블링 단계입니다. 

 

<이벤트 위임 예시 코드>

각 <li> 에 이벤트 리스너를 할당하는 것 부모 요소에 하나의 이벤트 리스너를 할당해 모든 <li>에 적용하는 방식입니다. e.target을 사용하여 어떤 요소가 눌렸는지 console에서 확인할 수 있습니다. 

 

<이벤트 위임의 장점들>

- 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약됩니다.
- 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문에 코드가 짧아집니다.
- innerHTML이나 유사한 기능을 하는 스크립트로 요소 덩어리를 더하거나 뺄 수 있기 때문에 DOM 수정이 쉬워집니다.

 

<이벤트 위임의 단점들>

- 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 합니다. 하지만 몇몇 이벤트는 버블링 되지 않습니다.
- 컨테이너 수준에 할당된 핸들러가 응답할 필요가 있는 이벤트든 아니든 상관없이 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야 하므로 CPU 작업 부하가 늘어날 수 있습니다.

 

참고 : 

https://codedamn.com/news/javascript/event-delegation-in-javascript-complete-guide

Event Delegation in JavaScript: Complete Guide

https://ko.javascript.info/event-delegation

이벤트 위임