자바스크립트(JavaScript) 이벤트 전파 버블링 막기

자바스크립트(JavaScript) 이벤트 전파 버블링(Bubbling) 막기

자바스크립트를 이용하여 화면 이벤트를 컨트롤 할 때,

이벤트 전파를 막아야 할 경우들이 있습니다.

웹페이지 내의 버튼을 클릭했을 때 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다.

이러한 현상을 이벤트 버블링 (Event Bubbling) 이라고 하며, 

1. 부모에게 이벤트 전파되는 것을 막는 stopPropagation()

2. 같은 DOM에 걸린 다른 이벤트에 전파되는 것을 막는 stopImmediatePropagation()

3. 현재 이벤트의 기본 동작을 중단하는 preventDefault()

4. stopPropagation() 과 preventDefault() 모두 수행한 것과 같은 return false

에 대해 예제를 통해 알아보겠습니다.

우선, 각 영역에 이벤트가 걸려있는 소스 입니다.

span 태그를 클릭하면 위의 상위 이벤트들이 모두 적용되는 것을 볼 수 있습니다.

1. 여기에 상위 DOM으로 이벤트가 전파되지 않도록 하는 stopPropagation()을 span 태그 영역에 추가하여

상위 DOM으로 이벤트 전파를 막도록 하였습니다.

p 태그를 클릭하면 div의 이벤트까지 호출이 되지만 span 태그 영역을 클릭하면 상위 이벤트들이 호출되지 않는 것을 볼 수 있습니다.

2. 같은 DOM에 걸린 다른 이벤트의 전파를  stopImmediatePropagation() 예제입니다.

span 태그에 두 개의 이벤트가 걸려있고, 첫번째 이벤트에 stopImmediatePropagation()을 추가하였습니다.

span 태그에 이벤트가 두개가 있지만 앞의 이벤트에 stopImmediatePropagation()를 만나 span 영역의 두번째 이벤트는 동작하지 않는 것을 볼 수 있습니다.

3. 현재 이벤트의 기본 동작을 막는 preventDefault() 예제입니다.

네이버 라는 a 태그의 기본 동작인 url 이동을 막고 콘솔을 찍는 것을 볼 수 있습니다.

4.  stopPropagation() 과 preventDefault() 모두 수행한 것과 같은 return false;

jQuery를 사용하는 경우, return false를 사용하면 

stopPropagation()의 기능과 preventDefault() 를 모두 수행한 것과  같은 기능을 수행하게 됩니다.

네이버 텍스트를 클릭하면 a 태그의 기본 기능인 url 이동 이벤트도 막게 되고, 상위로 이벤트 전파 또한 막을 수 있게 됩니다.