[js] 이벤트 버블링

날씨가 좀잡을 수 없을 정도로 오락가락 하고 있네요…
밥 먹으러 나갔다 오는게 업무보다 힘들어지는 더위가 찾아오고 있어요.. 큰일입니다. ㅠ

javascript 로 이벤트 핸들링을 하다보면 종종 내가 정한 범위를 넘어서 이벤트가 발생되는 경우를 만나곤 합니다.

위 예제 처럼 파란박스 위에 빨간박스가 겹쳐있을 때 아래와 같이 이벤트를 설정하게 되면

document.getElementById("a").onclick = clicked;
document.getElementById("b").onclick = clicked;

function clicked(event) {
    console.log("clicked");
}​

빨간박스를 클릭했을 때의 이벤트가 파란박스에도 영향이 미쳐 “clicked” 라는 메세지가 두번 노출되게 되는데 이것을 이벤트 버블링 이라고 합니다.
(테스트 – http://jsfiddle.net/rootbox/uGJnj/1/)

이런 경우 이벤트의 버블링을 제한해주어야 하는데 DOM 표준과 비 표준에 따라 방식이 나뉘어 집니다.

DOM 표준의 경우 stopPropagation(); 을 사용하고,
비 표준의 경우 cancelButtle = true; 를 사용합니다.

위 예제 코드를

document.getElementById("a").onclick = clicked;
document.getElementById("b").onclick = clicked;

function clicked(event) {
    var event = event || window.event;

    if(event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancleBubble = true;
    }

    document.getElementById("log").value += "clickedn";
}​

위와 같이 수정하면 이벤트 버블링은 발생하지 않게 됩니다.

실행 테스트 – http://jsfiddle.net/rootbox/uGJnj/

DOM – http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-stopPropagation
MSDN – http://msdn.microsoft.com/ko-kr/ms533545