이벤트 버블링(Event Bubbling)
특정 엘리먼트에 이벤트가 발생하면 해당 이벤트가 그 엘리먼트의 조상들에게 까지 전달 되는 현상이다.
이벤트 버블링을 막는 방법
버블링은 대체로 <html> 엘리먼트까지 올라간다. 이러한 이벤트를 멈추기 위해서는 최초로 이벤트가 발생되는 엘리먼트의 이벤트 핸들러에 event.stopPropagation() 를 사용하면 된다.
만약 하나의 이벤트에 여러 핸들러가 붙어 있는 경우 event.stopPropagation() 를 추가 해도 다른 이벤트는 버블링 될 것이다.모든 이벤트 버블링을 멈추고 싶은 경우에는 event.stopImmediatePropagation() 를 사용하도록 하자
이벤트 버블링 활용 방법
이벤트 위임을 사용할 때는 하위 요소마다 이벤트 핸들러를 할당하지 않고, 상위 요소에 하나의 이벤트 핸들러를 할당한다.이벤트의 버블링되는 특징을 이용하면 상위 요소에 있는 하나의 이벤트 핸들러만으로 하위 요소에서 발생한 이벤트들을 모두 처리할 수 있다.
이벤트 캡쳐링(Event Capturing)
이벤트 캡쳐는 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려간다.
사실 잘 사용되지는 않는다고 한다.
addEventListener 의 옵션 객체에 { capture: true } 또는 true 를 설정해주면 캡처링을 구현할 수 있다.
const divs = document.querySelectorAll("div");
const clickEvent = (e) => {
console.log(e.currentTarget.className);
};
divs.forEach((div) => {
div.addEventListener("click", clickEvent, { capture: true });
});<div class="DIV3">DIV3</div>를 클릭한다면 위에서부터 찾아 내려오기 때문에 콘솔에는 DIV1, DIV2, DIV3이 순서대로 찍힐 것이다.
*참고 사이트
: https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
: https://ko.javascript.info/bubbling-and-capturing
'개발 공부 > JavaScript' 카테고리의 다른 글
| [Javascript] 전역변수와 지역변수 (0) | 2022.11.27 |
|---|---|
| [JavaScript] 변수란(var, let cons)? 변수 표기법은(카멜,스네이크,파스칼,케밥 케이스)? (0) | 2022.11.17 |
| 220615 [JavaScript] promise와 async,await의 차이점 (0) | 2022.06.15 |
| 220614 [JavaScript] 실행 컨텍스트 - 호이스팅(Hoisting) (0) | 2022.06.14 |
| 220611 [JavaScript] SSR과 CSR (0) | 2022.06.11 |