이벤트 전달(이벤트 전파; event propagation), 이벤트의 전파 방식 - 이벤트 버블링 (bubbling), 이벤트 캡쳐링 (capturing), 이벤트 전달 막기

 

 

이벤트 전달(이벤트 전파; event propagation)

특정 이벤트가 먼저 발생해 어떤 순서로 발생할지 정하는 것을 이벤트 전달이라고 합니다.  즉, 이벤트가 발생했을 때, 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미합니다.

이벤트의 대상이 Window 객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않습니다. 하지만 Document 객체나 HTML 문서의 요소에서 이벤트가 일어나면 대상 요소를 결정하기 위해 이벤트의 전파가 일어납니다.

 

 

 

이벤트의 전파 방식

이벤트의 전파 방식은 크게 이벤트 버블링과 이벤트 캡처링 두 가지 방식으로 구분됩니다.

일반적으로 자바스크립트의 이벤트 전달 순서는 이벤트 버블링 방식으로 일어납니다.

 

이벤트 버블링 (bubbling)	·       자식 노드에서 부모 노드 순으로 이벤트를 실행하는 것을 의미합니다. ·       이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식입니다. ·       해당 요소의 리스너가 실행된 후, 그 부모 요소에 등록된 리스너가 실행되고, 또다시 그 부모 요소에 등록된 리스너가 실행됩니다. 이러한 이벤트의 전파는 Document 객체뿐만 아니라 가장 마지막에는 Window 객체까지 계속 이어집니다 ·       다수의 요소에 공통으로 적용되는 이벤트 리스너를 각각의 요소마다 따로 등록할 필요 없이 공통된 조상 요소에 한 번만 등록하면 처리할 수 있다는 장점이 있습니다. ·       인테넷 익스플로러/비IE 지원
이벤트 캡쳐링 (capturing)	·       이벤트가 부모노드에서 자식노드 순으로 실행되는 것을 의미합니다. ·       이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면서 전파되는 방식입니다. 맨 먼저 Window 객체의 리스너가 실행된 후, Document 객체에 등록된 리스너가 실행되고, 또다시 그 자식 요소에 등록된 리스너가 실행됩니다. 이러한 이벤트의 전파는 이벤트가 발생한 요소까지 이어집니다. ·       비ie만 지원 ·       이 전파 방식을 사용하기 위해서는 addEventListener() 메소드의 세 번째 인수에 true를 전달하면 됩니다. 대상객체.addEventListener(eventName, handler, true)

 

 

 

 

이벤트 전달 막기

실제 이벤트의 대상이 되는 요소에 이벤트가 전달되기 전에 상위 요소에 등록된 이벤트 리스너가 이를 가로채거나 잡아낼 수 있습니다.

이렇게 이벤트를 걸러내어 해당 이벤트 리스너가 호출되지 않도록 하는 기법을 이벤트 취소 기법이라고 합니다.

 

window.onload = function() {   document.getElementById('header').onclick = function() { alert('header'); }; document.getElementById('paragraph').onclick = function(e) {   var event = e || window.event;   alert('paragraph');   // 이벤트 전달 제거 event.cancelBubble = true; if (event.stopPropagation) { event.stopPropagation(); } }; };

 

<a id="linkBox" href="/javascript/intro">클릭</a>

document.getElementById("linkBox").addEventListener("click", clickLink);   function clickLink(event) { // 이벤트의 전파 취소 event.stopPropagation(); }