이벤트 버블링과 캡쳐링
- 김희영
- 2023-02-27 15:15
버블링 / 캡쳐링이 무엇인가?
중첩된 요소(부모,자식간)에 각각 이벤트를 부여할 때 이벤트 발생 순서가
제일 안쪽에 있는 것 부터 제일 바깥에 감싸진 것 까지 가는 순서대로 발생된다면 버블링
최상위 요소부터 제일 안쪽요소까지 가는 순서로 발생된다면 캡쳐링 이라고 합니다.
예를 들어
딤드가 있는 팝업을 퍼블리싱 할 때, 팝업을 감싸는 부모태그에 딤드 스타일을 넣어둔 상태에서
딤드를 클릭하면 팝업이 닫히게 하고 싶다고 가정해볼게요.
딤드를 클릭하면 팝업이 닫혀라 라고 이벤트를 주었더니
팝업의 부모에 딤드 스타일을 넣어둔 바람에 딤드가 아닌 팝업창을 클릭해도 팝업이 닫혀버리는 상황이 됐습니다.
이 상황이 바로 중첩된 요소에 각각 이벤트를 발생시키려 하는 상황이라고 볼 수 있습니다.
버블링
자식요소부터 이벤트가 발생하여 부모로 이벤트가 전파되는 것을 말합니다.
위에 예시처럼 팝업을 클릭해도 부모에게까지 이벤트가 전파되어 팝업이 닫혀버리는 이벤트 전파방식을 버블링이라고 해요.
이 버블링이 이벤트 전파방식의 기본값입니다.
캡쳐링
버블링과 반대로 부모에서부터 자식에게로 이벤트가 전파되는 것을 캡쳐링이라고 합니다.
그럼 버블링이 아니라 캡쳐링으로 전파되게 하고 싶으면 어떻게 하나요?
이벤트 등록시에 설정해주면 됩니다.
자바스크립트에서 addEventListener() 메서드를 이용해 이벤트를 등록하는데요.
이 때, addEventListenr는 3개의 인자를 전달합니다.
1. 이벤트 타입 2. 콜백함수 3. 이벤트전파방식
이벤트 타입 : click, mouseenter 등
콜백함수 : 이벤트를 발생시켰을 때 작동할 함수
이벤트 전파방식 : boolean 타입으로, false라고 쓰면 버블링 / true 라고 쓰면 캡쳐링으로 설정됩니다.
버블링 전파방식으로 이벤트 등록하기
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="a"> <div class="b"> <div class="c"> </div> </div> </div> <script> document.querySelector('.a').addEventListener('click', function(){ console.log('a') }, false); document.querySelector('.b').addEventListener('click', function(){ console.log('b') }, false); document.querySelector('.c').addEventListener('click', function(){ console.log('c') }, false); </script> |
캡쳐링 전파방식으로 이벤트 등록하기
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="a"> <div class="b"> <div class="c"> </div> </div> </div> <script> document.querySelector('.a').addEventListener('click', function(){ console.log('a') }, true); document.querySelector('.b').addEventListener('click', function(){ console.log('b') }, true); document.querySelector('.c').addEventListener('click', function(){ console.log('c') }, true); </script> |
이벤트 전파 막기
위에서는 버블링을 반대로 작동시키기 위한 방법이라면, 이번엔 이벤트가 전파되다가 특정부분부터는 멈추게 하는 방법입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="a"> <div class="b"> <div class="c"> </div> </div> </div> <script> document.querySelector('.a').addEventListener('click', function(){ console.log('a') }, false); document.querySelector('.b').addEventListener('click', function(e){ e.stopPropagation(); console.log('b') }, false); document.querySelector('.c').addEventListener('click', function(){ console.log('c') }, false); </script> |
위 예제에서는 false 이기 때문에 버블링으로 전파되므로, c-b-a 순으로 전파됩니다.
근데 b에다가 stopPropagation() 메서드를 사용하여 전파를 차단했으므로 a에서만 작동하고 더이상 작동되지 않습니다.
안녕하세요~ 김희영입니다 🙂