js

JS - 이벤트 버블링과 캡쳐링

3월 22, 2019
이벤트 버블링(Event Bubbling)이란 어떤 요소에서 이벤트가 발생하면 감지된 요소에서 상위 요소에 이르기까지 전달되어 이벤트가 전파되는 것을 말합니다.

예를 들어 최하위 요소에서 이벤트가 발생하면 <html>의 최상위 요소까지 이벤트가 전달됩니다. 아래 예제를 테스트해보면 알겠지만 하위 요소인 ‘자손요소’를 클릭하면 상위 요소인 <html> 까지 도달한다는 것을 알 수 있습니다.

<html onclick="alert('html');">
 <head>
   <title>이벤트 버블링</title>
 </head>
 <body onclick="alert('body');">
   <div onclick="alert('부모')">부모요소
     <div onclick="alert('자식')">----자식요소
       <div onclick="alert('자손')">--------자손요소</div>
     </div>
   </div>
 </body>
</html>

<자손> -> <자식> -> <부모> -> <body> -> <html> 순으로 말이죠. 다시 말하면 중첩된 요소들이 밑에서 위로 전파되는 것이 바로 버블링이라 부르죠. ‘자식요소’를 클릭하면 당연히 자식요소에서 <html>까지 버블링됩니다. 그런데 자손요소를 클릭했을 뿐인데 왜 상위요소로 전달되는 것일까요? 아쉽지만 대부분은 이벤트 버블링이 이루어집니다.


이벤트 캡쳐링

이벤트 캡쳐링(Event Capturing)은 버블링과는 반대로 전파됩니다. <html> -> <body> -> <부모> -> <자식> -> <자손> 순으로 위에서 밑으로 내려갑니다. 특정 이벤트가 발생하면 이벤트 리스너가 감지된 요소를 찾아 최상위 요소에서 단계적으로 찾아 내려가는 것이죠.

캡쳐링을 확인하려면 addEventListener() 의 세 번째 인수에 true 로 설정하면 됩니다. false이거나 비워두면 버블링이 되고, true 로 설정하면 캡쳐링이 됩니다.

<html>
 <head>
   <title>이벤트 캡쳐링</title>
 </head>
 <body>
   <div id="parent">부모요소
     <div id="child">----자식요소
       <div id="descendants">--------자손요소</div>
     </div>
   </div>

   <script>
    var parent = document.getElementById('parent');
    var child = document.getElementById("child");
    var descendants = document.getElementById("descendants");


    child.addEventListener('click', function(){
        alert("자식");
    }, true);
 
    descendants.addEventListener('click', function(){
        alert("자손");
    }, true);
 
    parent.addEventListener('click', function(){
        alert("부모");
    },true);
   </script>

 </body>
</html>


이벤트 버블링 중지

이벤트 버블링은 이벤트가 발생한 요소에서 상위에 있는 모든 핸들러를 호출합니다. 하지만 이벤트가 완전히 처리되었다고 생각된다면 중간에 버블링을 멈추게 할 수 있는 메소드가 .stopPropagation() 입니다.

<html onclick="alert('html');">
 <head>
   <title>이벤트 버블링</title>
 </head>
 <body onclick="alert('body');">
   <div onclick="alert('부모')">부모요소
     <div onclick="event.stopPropagation()">----자식요소
       <div onclick="alert('자손')">--------자손요소</div>
     </div>
   </div>
 </body>
</html>

'자손요소'를 클릭해도 이제는 상위요소로 전파되지 않습니다. 만일 여러 개의 이벤트가 있다면 아래 메소드로 전체를 막을 수 있습니다.

event.stopImmediatePropagation();

다음은 이벤트 리스너를 이용해 버블링을 중지해 보겠습니다.

<html>
 <head>
   <title>이벤트 버블링</title>
 </head>
 <body>
   <p>부모요소
     <div>----자식요소
     <br/>
       <span>--------자손요소</span>
     </div>
   </p>
   <script>
     document.addEventListener("click", function(e){
       // 이벤트 버블링 중지 
       e.stopPropagation();

       alert(e.target.tagName);
     });
   </script>

 </body>
</html>

Tag:

0 Comments

0 댓글