[모던 자바스크립트 튜토리얼] 이벤트 버블링, 이벤트 캡처링, 이벤트 위임

모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다.

이벤트 발생한 요소(자식 요소)에서 시작하여 DOM 트리 상위(부모 요소)로 전파되는 방식

이벤트가 제일 깊은 곳에 있는 요소에서 시작하여 부모 요소를 거슬러 올라가며 발생하는 모양이 물 속에서 거품이 올라오는 모양🫧과 닮아서 표현된 것이다.

event.target	이벤트가 발생한 가장 안쪽의 요소, 실제 이벤트가 시작된 타깃 요소
this(=event.currentTarget)	현재 요소, 현재 실행 중인 핸들러가 할당된 요소를 참조

event.stopPropagation(), event.stopImmediatePropagation() 함수를 통해 버블링을 중단할 수 있다.

하지만, 이벤트 버블링을 막아야 하는 경우는 거의 없다고 한다. 오히려 버블링을 멈춰서 문제가 될 수 있는 상황을 만들 수 있다. 그래서 버블링을 중단하는 것이 필요한 상황인지 명백하게 판단할 필요가 있다.

이벤트가 DOM 트리의 상위 요소(부모 요소)에서 시작하여 하위 요소(자식 요소)로 전파되는 방식

공통 조상을 사용해 하위 요소(자식 요소)들의 이벤트를 처리하는 기법

이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.

이 덕분에 코드가 단순해지고, 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다고 한다.

버블링과 캡처링

ko.javascript.info

이벤트 위임

ko.javascript.info

티스토리툴바