Javascript 이벤트 전파(bubbling, capturing)와 중단

어떤 element에서 발생한 이벤트는 부모 혹은 자식에게 전파되게 되는데, 이때 전파되는 방향에 따라 버블링(bubbling), 캡쳐링(capturing)이라고 부른다.

먼저 javascript addEventListener() 함수를 살펴보자.

document.addEventListener(event, function, useCapture)

• event: 이벤트의 이름을 명시한다. (click, mouseover 등)
• function: 이벤트가 발생했을 때 실행할 함수를 명시한다.
• useCapture: Optional. capturing에서 해당 이벤트가 실행될 것인지 여부를 명시한다. (true면 capturing, false(default)면 bubbling으로 실행)

1. Bubbling

Bubbling은 이벤트가 발생한 element부터 조상들에게 순차적으로 이벤트가 전파되는 방식이다.

2. Capturing

Capturing은 이벤트가 발생한 element부터 자식들에게 순차적으로 이벤트가 전파되는 방식이다.

이러한 이벤트 전파를 막을 수 있는 방법은 총 4가지가 있다:

event.preventDefault()

현재 이벤트의 default 동작을 중단한다. 예를 들면 a 태그의 경우 클릭하면 명시된 href로 이동하는 것이 default 동작이다.

event.stopPropagation()

현재 이벤트가 bubbling 혹은 capturing 되는 것을 막는다.

event.stopImmediatePropagation()

bubbling 혹은 capturing 뿐만 아니라, 해당 개체에 걸린 현재 event를 제외한, 다른 event들의 동작까지 막는다.

return false

jQuery event handler의 경우는, stopPropagation()과 stopImmediatePropagation()을 모두 수행한 것과 같고 그 외의 handler 경우(non-jQuery)에서는, preventDefault()를 수행한 것과 같다.