버블링과 캡처링, 이벤트 위임(Event Delegation)

이벤트 버블링(Event Bubbling)

• 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 발생하는 위치뿐만 아니라 상위의 화면 요소들로 전파되는 특성을 의미한다.
• 이때 이벤트는 하위 요소 → 상위 요소들로 전파된다.

예시

아래 예시에서 사용자가 '최하위 요소'라는 영역을 클릭할 경우, 콘솔에 '최하위 요소가 호출되었습니다.' 라고만 출력되어야 한다. 그러나 상위 요소까지 전파되어서 모든 요소들이 콘솔로 출력된다. 이러한 특성을 이벤트 버블링이라고 한다.

이벤트 캡처링(Event Capturing)

• 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 발생하는 위치뿐만 아니라 하위의 화면 요소들로 전파되는 특성을 의미한다.
• 이때 이벤트는 상위 요소 → 하위 요소들로 전파된다.

예시

아래 예시에서 사용자가 '상위 요소'라는 영역을 클릭할 경우, 콘솔에 '상위 요소가 호출되었습니다.' 라고만 출력되어야 한다. 그러나 하위 요소까지 전파되어서 모든 요소들이 콘솔로 출력된다. 이러한 특성을 이벤트 캡처링이라고 한다.

이벤트 버블링, 캡처링 중단

• 이벤트 버블링이 발생함에 따라 이를 중단하기 위해 event.stopPropagation() 메서드를 사용한다.
• 이 메서드는 이벤트 버블링 혹은 캡처링에서 핸들러의 이벤트 객체가 호출되었을 때, 첫 번째 핸들러가 실행되지만 이벤트가 더 이상 위 또는 아래로 전파되지 않도록 만들어서 더 이상의 핸들러가 실행되지 않도록 한다.

예시

이벤트 위임(Event Delegation)

버블링과 캡처링을 활용하여 이벤트 핸들링의 패턴인 이벤트 위임을 구현할 수 있다. 이는 엘리먼트마다 모든 이벤트 리스너를 만들어야 하는 번거로움이 있기 때문에 이러한 동작을 최소화하기 위해 이벤트 위임을 사용한다.