[ JavaScript ] 이벤트 위임 Event Delegation

이벤트 위임 Event Delegation 이란? 

• 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법
• DOM event에 적용할 수 있는 유용한 패턴
• 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다 => 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 할당해서 여러 요소 한꺼번에 다룬다
• event.target : 이벤트가 발생한 가장 안쪽 요소 => 실제 어디서 이벤트가 발생했는지 알 수 있다
• event.currentTarget ( = this ) : 이벤트를 핸들링하는 현재 요소(핸들러가 실제 할당된 요소)
• event.eventPhase : 현재 이벤트 흐름 단계(캡처링-1,타깃-2,버블링-3)
• 추가, 삭제가 용이해서 HTML 구조가 유연해진다
• 캡처링과 버블링을 활용

캡처링 (최상위 조상에서 시작해 아래로 전파)

버블링 (밑에서 위로 전파)

• 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지(document 만날 때 까지) 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다

• event.stopPropagation() : 이벤트를 완전히 처리하고 난 후 버블링을 중단 , 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못한다
• event.stopImmediatePropagation() : 버블링을 멈추고 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다

장점

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

단점

• 반드시 이벤트가 버블링 되어야 사용 가능
• 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야 하므로 CPU 작업 부하가 늘어날 수 있다(but 무시할만한 수준이여서 잘 고려X)

---

참조

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

https://ko.javascript.info/bubbling-and-capturing