코드쓰는사람

간단하게 예를 들어 설명해보겠다.
그림과 같이 두개의 레이어가 겹쳐져 있고 이 두 레이어에 mousedown 과 같은 이벤트를 같이 준다고 해보자.

이를 코드로 보면 다음과 같이 표현할 수 있다.

<script type="text/javascript">
var num = 0;
function increase() {
	num++;
	document.title = num;
}
</script>

<div id="layer1" style="background: red; position: absolute; top: 10px; left: 10px; width: 300px; height: 300px;" onmousedown="increase(event)">
.<div id="layer2" style="background: blue; position: absolute; top: 20px; left: 20px; width: 100px; height: 100px;" onmousedown="increase(event)"> </div>
>/div>

위와 같은 모델이 있을 경우 즉, layer1이 layer2 의 parentNode가 되는 경우 (직계가 아니라도 상관없다) layer2에 실행될 mousedown 이벤트는 layer1에도 영향을 미친다. 위 코드를 복사해서 실행하고 제목표시줄을 보라. 빨간색 영역을 클릭하면 1씩 증가하지만, 파란색 영역을 클릭하면 2씩 증가한다. 이런 것을 이벤트가 번졌다고 한다(모질라계열에서는 증식propagation이라는 단어를 사용하고 IE에서는 거품bubble이라는 단어를 사용한다.).

다행히 브라우저에서 위와 같은 현상을 제거하기 위한 방법을 제공하고 있다. 위에서 increase 함수를 다음과 같이 수정해보자.

function increase(e) {
	var evt = e || window.event; // 이벤트를 받아온다.
	num++;
	document.title = num;
	if (evt.stopPropagation) {
		evt.stopPropagation();
	} else {
		evt.cancelBubble = true;
	}
}

이제 다시 파란색 영역을 클릭해보면 파란색 영역에서도 1씩 증가하는 것을 알 수 있다.

참고 URL

• DOM Event Model :
  http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-stopPropagation
• MSDN :
  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/cancelbubble.asp

P.S// Mozilla 계열에서도 cancelBubble 이라는 프로퍼티를 지원했었으나 DOM 표준에 맞게 stopPropagation 만을 지원하고 cancelBubble을 사용하지 않게 해버렸다.