[JS] 이벤트 버블링과 캡쳐링

태그안에 태그를 감싸는 형태로 HTML문서를 구성했을 경우가 있다. 따라서 가장 안쪽(자식) 태그에 이벤트를 걸 때 이벤트 버블링이 생긴다.

이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하느 것을 의미한다.

자식노드에서 이벤트를 발생시키켰다고 해서 부모노드까지 이벤트가 전달될 필요는 없다. 따라서 이를 제거해주어야한다.(물론 버블링을 잘 활용할 수도 있다.)

그렇다면 캡쳐링은 무엇일까? 버블링과 반대되는 개념으로 부모노드의 이벤트가 자식노드로 전달되는 것을 의미한다. 그러나 IE브라우저에서는 캡쳐링을 지원하지 않음으로 거의 사용되지 않는다.(표준 브라우저에서는 사용 가능하나 역시 잘 활용하지 않는다)

그렇다면 이벤트 버블링 제거를 해보자.
자식노드의 버튼을 btn이라고 한다면
예)
btn.onclick = function(e){
    var event = e || window.event;

    event.cancleBubble = true;// IE 이벤트 버블링 제거
    if(event.stopPropagation)
        event.stopPropagation();// 표준 브라우저 이벤트 버블링 제거
}