이벤트 버블링(Event Bubbling), 이벤트 캡쳐(Event Capture), 이벤트 위임(Event Delegation) JavaScript
이벤트 버블링(Event Bubbling)이란
- 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
HTML의 트리 구조를 이해하고 이벤트 버블링의 예시를 보는 것이 좋다.
//HTML의 트리 구조
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
위와 같이 하나의 태그를 클릭 했을 때 클릭된 클래스 이름을 출력하는 코드에서 <div class="three"></div> 를 클릭하면
위 사진과 같이 실행되게 된다.
브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킵니다. 따라서, 클래스 명 three -> two -> one 순서로 div 태그에 등록된 이벤트들이 실행됩니다. 마찬가지로 two 클래스를 갖는 두 번째 태그를 클릭했다면 two -> one 순으로 클릭 이벤트가 동작하게 됩니다.
위와 같은 경우는 각 태그마다 이벤트가 등록되어 있기 때문에 발생한다 만약 한가지 태그에만 이벤트가 등록되어 있었다면 이벤트 버블링은 발생하지 않는다.
이벤트 캡쳐(Event Capture)
- 이벤트 버블링과는 반대 방향으로 진행되는 이벤트 전파 방식
HTML의 트리 구조를 이해하고 이벤트 캡쳐의 예시를 보는 것이 좋다.
//HTML의 트리 구조
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true // default 값은 false입니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
addEventListener() API에서 옵션 객체에 capture:true를 설정해주면 됩니다. 그러면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색합니다.
capture 옵션은 두 가지 값을 가질 수 있습니다.
- false이면(default 값) 핸들러는 버블링 단계에서 동작합니다.
- true이면 핸들러는 캡처링 단계에서 동작합니다.
따라서, 아까와 동일하게 <div class="three"></div>를 클릭해도 위와 같은 결과가 나타납니다.
event.stopPropagation()
- 이벤트 버블링, 캡쳐링을 막기위한 웹 API
- 버블링과 캡쳐링을 막을 때에는 신중해야한다(예를 들면 분석 시스템을 도입한다고 가정하고 클릭 이벤트를 통해 분석된다고 생각하면 막은 캡쳐링과 버블링들 때문에 제대로 분석이 되지 않을 것이다.
- stopPropagation을 사용한 영역은 죽은 영역이 되어버린다.
이벤트 위임(Event Delegation)
- 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
즉 이벤트 위임을 사용하면 이벤트를 늘려야 할 때 다시 이벤트를 등록하는 번거로움을 덜 수 있다.
(출처 https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/#이벤트-버블링---event-bubbling 캡틴 판교님의 글, https://ko.javascript.info/bubbling-and-capturing)
'JavaScript' 카테고리의 다른 글
| 엄격 모드(Strict Mode) - JavaScript (0) | 2022.02.09 |
|---|---|
| 쉐도우 돔(Shadow DOM) - JavaScript (0) | 2022.02.02 |
| 프로토타입(Prototype) - JavaScript (0) | 2022.01.28 |
| 호이스팅(Hoisting) - JavaScript (0) | 2022.01.20 |
| 스코프(Scope) - JavaScript (0) | 2022.01.12 |
