[JavaScript] 이벤트 버블링, 캡처링, 위임이란?

🔗 이벤트 버블링(Event Bubbling)이란?

 

 

 

 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다.

 

 

🔗 이벤트 캡처링(Event Capturing)이란?

 

 

 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

 

 

🔗 이벤트 위임(Event Delegation)이란?

 

 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어하는 방식이다. (앞에서 살펴본 이벤트 버블링과 캡처링은 이벤트 위임을 위한 선수 지식이라고 해도 과언이 아니다. 이벤트 위임은 실제 바닐라 자바스크립트로 웹과 앱을 구현할 때 자주 사용하는 코딩 패턴이다.)

 

장점

• 코드가 짧아지고 메모리가 절약된다.
• 무분별한 이벤트 등록으로 인한 메모리 누수를 방지할 수 있다.
• 자유롭게 하위요소를 추가, 삭제할 수 있다.

단점

• 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 한다.
• 모든 하위 요소에서 발생하는 이벤트에 응답해야 하므로 CPU 작업 부하가 늘어날 수 있다.

 

---

🔎 참고 자료

• 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

💡 같이 보면 좋을 Post

[JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다.