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

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

<body>
	<div id="parent">
		<div id="children">클릭</p>
	</div>
</body>

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()'를 사용할 수 있습니다.

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
	});
});

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

<body>
	<div id="parent">
		<div id="children">클릭</div>
	</div>
</body>

jQuery(document).ready(function($){
	$("body").on("click", "div", function(event){
		alert("Div Click");
	});
});

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

jQuery(document).ready(function($){
	$("body").on("click", "div", function(event){
		alert("Parent Click");
		if(event.stopImmediatePropagation) event.stopImmediatePropagation(); //MOZILLA
		else event.isImmediatePropagationEnabled = false; //IE
	});
});

3. 기본 동작 중지하기

<body>
	<a href="#">클릭</a>
	<!-- <a href="#NULL">클릭</a> -->
</body>

jQuery(document).ready(function($){
	$("body").on("click", "a", function(event){
		alert("A click");
	});
});

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

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