[Javascript] 이벤트 버블링, 캡쳐링 제거하기

보통 자식노드부터 상향이나 하향으로 연쇄적으로 이벤트가 발생하는 것을 버블링, 캡쳐링이라한다.

이러한 현상은 웹 애플리케이션을 만들때 치명적인 부분으로 작용할 수 있으므로 반드시 제거해야하는 부분 중 하나인데, 이때 바로 이벤트를 구현할 때 객체전달이 필요한지 알 수 있을 것이다.

관련코드는 이러하다.

document.getElementById('test').onclick - function (e) {

var event = e || window.event; // 객체 전달

alert('testsetestestsets123123123');

event.cancelBubble =  true; //값 변경 -> 보통 IE에서만 실행된다. IE9부터는 아래와 위 모두 가능

if(event.stopPropagation) {

event.stopPropagation(); //메서드 실행, IE를 제외한 모든 브라우저 기준

}

};    

참고 하시길 ㅎ