[javascript] 이벤트 버블링과 캡처링! 이벤트 흐름,전달 알아보기

javascript
블로그 이미지

이챙(leechaeng)

﹒2022. 5. 28.

이벤트를 등록할때 내가 생각하지 못했던(?)대로 이벤트가 적용될때가 있습니다. 바로 이벤트 버블링과 캡처링 때문인데요. 어떻게 이벤트가 흐름을 타는지 알아봅시닷!

 

1️⃣ 이벤트 버블링(event bubbling)

이벤트가 발생했을때 하위요소(자식) -> 상위요소(부모)로 이벤트가 전달되는 현상

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">  
        <button id="child">클릭</button>  
      </div>  
      
    <script>  
        var parent = document.querySelector('#parent');  
          parent.addEventListener('click', function(){  
            console.log("부모 이벤트 호출");  
          });  
      
       var child = document.querySelector('#child');  
          child.addEventListener('click', function(){  
            console.log("자식 이벤트 호출");  
          });  
      </script>  
</body>
</html>


결과

위의 코드를 보면 div랑 button요소가 중첩되있어요. 보통 이렇게 요소가 중첩되어 동일한 이벤트가 발생할때 이벤트 버블링이 발생합니다. div가 부모고 button이 자식인 상태에서 두 요소에 이벤트를 할당해주었습니다. 그러면 어떤게 먼저 호출될까요? 바로 자식인 child의 이벤트가 호출됩니다. 이벤트 버블링 때문이죠! 버튼을 클릭하면 버튼이 하위요소이기 때문에 child가 먼저 호출되고 부모인 prent가 호출됩니다. 버블링이 하위에서 상위요소로 이벤트가 전달되는 거니까요.

제가 버블링에서 이해가 안됬던게 분명 parent에 이벤트를 걸어서 child에서 이벤트가 발생한건데 왜 버블링이지..? 캡처링 아닌가..(상위에서 하위요소 이벤트 전달)라는 생각을 했었는데요. 결론적으로 하위요소인 button에서 이벤트가 발생되어 parent 이벤트가 호출된 것 이므로 이벤트 버블링라고 합니다..

이벤트 버블링은 위 그림과 같이 버튼에서 이밴트가 발생되면 상위요소로 이벤트가 전달됩니다

 

🖐🏼 버블링 멈추기! event.stopPropagation() 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">  
        <button id="child">클릭</button>  
      </div>  
      
    <script>  
        var parent = document.querySelector('#parent');  
          parent.addEventListener('click', function(){  
            console.log("부모 이벤트 호출");  
          });  
      
       var child = document.querySelector('#child');  
          child.addEventListener('click', function(event){  
            event.stopPropagation() //버블링 멈추기
            console.log("자식 이벤트 호출");  
          });  
      </script>  
</body>
</html>


결과

버블링 이고 뭐고 난 하위요소에만 이벤트 발생시키고 싶다! 하면 event.stopPropagation을 사용하면 됩니다

 

 

2️⃣ 이벤트 캡처링(event capturing)

캡처링은 버블링의 반대개념 입니다. 상위요소(부모) -> 하위요소(자식)으로 이벤트가 전달되는 현상

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">  
        <button id="child">클릭</button>  
      </div>  
      
    <script>  
        var parent = document.querySelector('#parent');  
          parent.addEventListener('click', function(){  
            console.log("부모 이벤트 호출");  
          },true);  
      
       var child = document.querySelector('#child');  
          child.addEventListener('click', function(event){  
            event.stopPropagation()
            console.log("자식 이벤트 호출");  
          });  
      </script>  
</body>
</html>


결과

캡처링은 이벤트리스너 세번째 인수에 true를 설정해주면 적용이 됩니다. 위의 코드를 실행하면 부모이벤트가 호출이 되요.


이벤트 캡처링은 위 그림과 같이 버튼을 클릭하면 상위요소에서 하위요소로 이벤트가 전달됩니다.




저작자표시 동일조건

'javascript' 카테고리의 다른 글

이벤트루프 드디어 정.리.해.보.았.다.  (0) 2024.02.22
논리연산자(논리합,옵셔널 체이닝,null 병합연산자)로 코드 간결하게 하기, if문 줄이기  (0) 2022.06.28
[javascript] 어라, 객체를 복사했는데 이상하네?🤔깊은복사와 얕은복사를 알아보자  (0) 2022.04.21
[javascript]클로저 Clousure 가 뭔지 간단하게 알아보기  (0) 2022.04.05
[자바스크립트] 고차함수..?  (0) 2022.03.16
이챙(leechaeng)
이챙(leechaeng)

프론트엔드 개발도 하고 뛰기도 하고

'javascript' 카테고리의 관련 글

티스토리툴바