javascript 이벤트 버블링 방지 이벤트 중복 방지 / 이벤트 버블링, 캡처링

javascript 이벤트 버블링 방지 이벤트 중복 방지 / 이벤트 버블링, 캡처링

 

이벤트 버블링이란

이벤트가 발생한 target 부터 부모로 이벤트를 전달 하는 것을 말합니다. 

 

var parentDiv = document.createElement("div");
parentDiv.addEventListener("click", function(){
    alert("parentDiv click");
});
var childDiv = document.createElement("div");
childDiv.addEventListener("click", function(){
    alert("child click");
});
var a = document.createElement("a");
a.addEventListener("click", function(){
    alert("a click");
});
childDiv.appendChild(a);
parentDiv.appendChild(childDiv);

 

예를들어 위와 같은 코드가 있을 때,

a를 클릭하게 되면 'a click' -> 'child click' -> 'parent click' 순으로 이벤트가 발생하게 됩니다.

이와 같이 하위에서 상위 요소로 이벤트가 전달되는 것을 이벤트 버블링이라고 합니다. 

 

이를 막기 위해서는 자식 요소에서 e.stopPropagation(); 을 선언해 주면 됩니다. 

 

var parentDiv = document.createElement("div");
parentDiv.addEventListener("click", function(){
    alert("parentDiv click");
});
var childDiv = document.createElement("div");
childDiv.addEventListener("click", function(e){
    e.stopPropagation();
    alert("child click");
});
var a = document.createElement("a");
a.addEventListener("click", function(e){
    e.stopPropagation();
    alert("a click");
});
childDiv.appendChild(a);
parentDiv.appendChild(childDiv);

 

e.stopPropagation() 은 이벤트 버블링 및 캡처링이 발생하는 것을 막아줍니다. 

 

참고로 이벤트 캡처링에 대해서도 알아보겠습니다.

이벤트 캡처링은 버블링과 반대로 상위요소에서 하위요소로 이벤트가 전달되는 것을 말합니다. 

캡처링을 발생시키기 위해서는 addEventListener에서 3번째 파라메터에 true를 주면 됩니다. 

 

var parentDiv = document.createElement("div");
parentDiv.addEventListener("click", function(){
    alert("parentDiv click");
}, true);
var childDiv = document.createElement("div");
childDiv.addEventListener("click", function(e){
    alert("child click");
});
var a = document.createElement("a");
a.addEventListener("click", function(e){
    alert("a click");
}, true);
childDiv.appendChild(a);
parentDiv.appendChild(childDiv);

 

첫번째 예시 코드와 달리 callback function 다음에 true를 넣은 것을 볼 수 있습니다. 

default 값이 false 라 보통은 캡처링이 발생하지 않습니다. 

 

참고로, 버블링과 캡처링이 동시에 일어날 경우 캡처링 (부모 -> 자식) 후에 버블링 (자식 -> 부모) 이 일어나게 됩니다.