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

 

 

 

자바스크립트에서 이벤트 전달 방식에는 버블링, 캡쳐, 위임 방식이 있습니다.

 

이벤트 버블링과 캡처링은 이벤트 전달, 차단과 관련해서 매우 중요한 개념입니다. 

 

 

1. 이벤트 버블링

 이벤트 버블링은 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정을 의미합니다.

 

 

 

<div class="grand-parent">
    <div class="parent">
        <div class="son"></div>
    </div>
</div>

var grandParent = document.querySelector('.grand-parent');
var parent = document.querySelector('.parent');
var son = document.querySelector('.son');

grandParent.addEventListener('click', function(e) {
    console.log('grand-parent');
});

parent.addEventListener('click', function(e) {
    console.log('parent');
});

son.addEventListener('click', function(e) {
    console.log('son');
});

 

이 상태에서 노란색 박스(son)를 클릭하였을 때의 결과입니다.

 

parent와 grand-parent까지 출력되는 이유는 이벤트 버블링 때문입니다.

 

파란색 박스(parent)를 클릭한다면 결과는 다음과 같습니다.

 

파란색 박스부터 상위 요소(grand-parent)로 이벤트가 전달되어지기 때문에 이와 같은 결과가 발생합니다.

 

 

 

2. 이벤트 캡쳐링

 이벤트 캡쳐링은 이벤트 버블링과는 정반대의 개념으로 어떤 요소에 대한 이벤트가 발생하였을 때 최상위 부모로부터 이벤트가 발생된 요소까지 이벤트가 전달되어지는 과정을 의미합니다.

 

 

이벤트 캡쳐링을 하기 위해서는 addEventListener의 세 번째 인자를 true로 설정해야 합니다.

 

target.addEventListener(type, listener, [useCapture]);

 

addEventListener의 세 번째 인자를 아예 쓰지 않거나 false로 설정한다면 '이벤트 버블링'을 하겠다는 의미이며,

true로 설정한다면 '이벤트 캡쳐링'을 하겠다는 의미입니다.

 

var grandParent = document.querySelector('.grand-parent');
var parent = document.querySelector('.parent');
var son = document.querySelector('.son');

grandParent.addEventListener('click', function(e) {
    console.log('grand-parent');
}, true);

parent.addEventListener('click', function(e) {
    console.log('parent');
}, true);

son.addEventListener('click', function(e) {
    console.log('son');
}, true);

 

이 상태에서 노란색 박스(son)를 클릭하였을 때의 결과입니다.

 

이벤트 캡쳐링으로 인해 grand-parent, parent, son 순으로 출력이 됩니다.

 

 

 

 

 

#참고사이트

https://www.javascripttutorial.net/javascript-dom/javascript-events/

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://ko.javascript.info/bubbling-and-capturing