자바스크립트 이벤트 버블링, 기본 동작 막기

Explanation

자바스크립트의 이벤트 처리는 계층적인 DOM 구조에 중복적으로 실행되기도 하는데 이 현상을 이벤트 버블링이라고 합니다. 그리고 버블링으로 인해 예상하지 못한 결과를 얻게 되는 일을 자주 겪게 되는데, 그에 따른 방법을 정리해보았습니다.

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

위와 같은 구조에서 ‘클릭’을 클릭하면 ‘Children Clcik” 알림창과 ‘Parent Clcik’ 알림창이 중복되어 실행됩니다. 이렇게 이벤트가 부모에 전파되는 것을 막기위해 ‘event.stopPropagation()’를 사용할 수 있습니다.

2. 같은 DOM에 걸린 이벤트 막기

위와 같은 구조에서 ‘클릭’을 클릭하면 ‘Div Click” 알림창이 2번 중복 실행되는 것을 알 수 있습니다. 이렇게 동일한 DOM에 걸린 이벤트의 중복 실행을 ‘event.stopImmediatePropagation()’로 중지할 수 있습니다.

3. 기본 동작 중지하기

그다지 예가 좋아보이진 않지만.. 위와 같은 구조에서 ‘클릭’을 클릭하면 ‘A click’이라는 알림창이 뜨고 페이지 스크롤이 최상단으로 이동하게 되며 URL의 마지막에 #에 추가됩니다. 하지만 ‘event.preventDefault()’를 사용하면 엘리먼트의 기본적인 동작을 중단시킬 수 있습니다.

지식이 얕아 용어의 해설이나 잘못 작성된 부분이 있을 수 있습니다… 잘못된 부분은 댓글로 알려주시면 감사하겠습니다!

참조
http://blog.javarouka.me/2011/12/html-event-bubbling.html
http://programmingsummaries.tistory.com/313
http://blog.naver.com/zeroscience/120060674558
http://stackoverflow.com/questions/6446482/how-can-i-mimic-the-behaviour-of-stopimmediatepropagation-without-using-jquer