Escape, Unicode, ASCII 그리고 encodeURI, encodeURIComponent, normalize까지
2020-01-03
자바스크립트 이벤트 버블링, 기본 동작 막기
2015-12-02
Explanation
자바스크립트의 이벤트 처리는 계층적인 DOM 구조에 중복적으로 실행되기도 하는데 이 현상을 이벤트 버블링이라고 합니다. 그리고 버블링으로 인해 예상하지 못한 결과를 얻게 되는 일을 자주 겪게 되는데, 그에 따른 방법을 정리해보았습니다.
|
1 2 3 4 5 |
<body> <div id="parent"> <div id="children">클릭</p> </div> </body> |
|
1 2 3 4 5 6 7 8 |
jQuery(document).ready(function($){ $("body").on("click", "#parent", function(event){ alert("Parent Click"); }); $("body").on("click", "#children", function(event){ alert("Children Click"); }); }); |
위와 같은 구조에서 ‘클릭’을 클릭하면 ‘Children Clcik” 알림창과 ‘Parent Clcik’ 알림창이 중복되어 실행됩니다. 이렇게 이벤트가 부모에 전파되는 것을 막기위해 ‘event.stopPropagation()’를 사용할 수 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function($){ $("body").on("click", "#parent", function(event){ alert("Parent Click"); }); $("body").on("click", "#children", function(event){ alert("children Click"); if(event.stopPropagation) event.stopPropagation(); //MOZILLA else event.cancelBubble = true; //IE }); }); |
|
1 2 3 4 5 |
<body> <div id="parent"> <div id="children">클릭</div> </div> </body> |
|
1 2 3 4 5 |
jQuery(document).ready(function($){ $("body").on("click", "div", function(event){ alert("Div Click"); }); }); |
위와 같은 구조에서 ‘클릭’을 클릭하면 ‘Div Click” 알림창이 2번 중복 실행되는 것을 알 수 있습니다. 이렇게 동일한 DOM에 걸린 이벤트의 중복 실행을 ‘event.stopImmediatePropagation()’로 중지할 수 있습니다.
|
1 2 3 4 5 6 7 |
jQuery(document).ready(function($){ $("body").on("click", "div", function(event){ alert("Parent Click"); if(event.stopImmediatePropagation) event.stopImmediatePropagation(); //MOZILLA else event.isImmediatePropagationEnabled = false; //IE }); }); |
|
1 2 3 4 |
<body> <a href="#">클릭</a> <!-- <a href="#NULL">클릭</a> --> </body> |
|
1 2 3 4 5 |
jQuery(document).ready(function($){ $("body").on("click", "a", function(event){ alert("A click"); }); }); |
그다지 예가 좋아보이진 않지만.. 위와 같은 구조에서 ‘클릭’을 클릭하면 ‘A click’이라는 알림창이 뜨고 페이지 스크롤이 최상단으로 이동하게 되며 URL의 마지막에 #에 추가됩니다. 하지만 ‘event.preventDefault()’를 사용하면 엘리먼트의 기본적인 동작을 중단시킬 수 있습니다.
|
1 2 3 4 5 6 7 |
jQuery(document).ready(function($){ $("body").on("click", "a", function(event){ alert("A click"); if(event.preventDefault) event.preventDefault(); //MOZILLA else event.returnValue = false; //IE }); }); |
지식이 얕아 용어의 해설이나 잘못 작성된 부분이 있을 수 있습니다… 잘못된 부분은 댓글로 알려주시면 감사하겠습니다!
참조
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
