(자바스크립트/JavaScript)이벤트 버블링, 캡쳐, 이벤트 취소하기(preventDefault, stopPropagation)

이벤트 버블링(Event Bubbling)

 

웹에서 이벤트를 감지하는 방식 중 하나입니다. 이벤트의 버블링은 이벤트가 감지되었을 때, 해당 요소를 포함하고 있는 최상위요소까지 이벤트가 전파 되는 것을 의미합니다.

아래의 코드를 예시로 보겠습니다.

<div onclick="alert('div')">Div
    <p onclick="alert('p')">P
        <span onclick="alert('span')">Span</span>
    </p>
</div>

이 코드를 실행하게 되면 Span -> P -> Div 창이 뜨게 됩니다. 위와 같이 이벤트가 하위에서 상위요소로 전파되는 방식을 이벤트 버블링이라고 합니다.

 

이벤트 캡쳐(Event Capture)

 

이벤트 캡쳐는 이벤트 버블링과 반대방향으로 진행되는 방식 입니다. 즉 window부터 최초로 이벤트가 발생한 자식요소로 내려가는 과정을 의미합니다.

addEventListener()의 API 옵션 객체에서 capture: true를 설정하여 사용할 수 있습니다.

 

자바스크립트에서 이벤트 중단하기

 

event.target

• 최초 이벤트가 발생한 요소를 가리킵니다.

• event.currentTarget은 실제로 이벤트가 실행되는 요소를 알려줍니다.

 

 

이벤트 중단하기

1. event.preventDefault()

• 이벤트를 취소할 수 있는 경우 이벤트의 전파를 막지않고 이벤트를 취소합니다.

• 이벤트의 기본동작을 중단합니다.

• 이벤트의 전파를 막지 않기 때문에 버블링이나 캡쳐를 중지시키지는 않습니다.

 

 

2.event.stopPropagation()

• 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.

• 이벤트가 상위혹은 하위로 전파되지 않도록 중단합니다.

 

3.event.stopImmediatePropagation()

• 같은 이벤트에서 다른 리스너들이 불려지는 것을 막습니다.

• 상위와 하위뿐만 아니라 현재에 있는 다른 이벤트도 동작하지 않도록 중단합니다.

• 첫번째 이벤트만 실행합니다.

 

4. return false

• jQuery를 사용할때는 event.stopPropagation()과 event.preventDefault()를 모두 수행한 것과 습니다.

• jQuery를 사용하지 않을 때는 event.preventDefault()와 같습니다.