자바스크립트 이벤트 버블링과 캡쳐링

Sunseungcheol

Front-End

vsoghlv@naver.com

자바스크립트 이벤트 버블링과 캡쳐링

Feb 28, 2021

React.js

브라우저에서 이벤트를 감지하는 방식은 두 가지 방식으로 구분되는데 버블링( bubbling )과 캡쳐링( capturing ) 이다.

버블링 Bubbling

이벤트 버블링은 특정 요소에서 이벤트 발생시 상위의 요소들로 전달되는 특성을 말한다. (여기서 요소는 HTML DOM 트리구조를 말한다)

<body>
    <div class="1">
        <div class="2">
            <div class="3"></div>
        </div>
    </div>
</body>

let allDiv = document.querySelectorAll("div");
allDiv.forEach(function (e) {
  e.addEventListener("click", log);
});

function log(e) {
  console.log(e.currentTarget.className);
}

위와 같이 모든 div 에 클릭이벤트를 주고 div.3 을 클릭하면 그 상위 div 들도 전부 이벤트가 실행된다.

//div.3 클릭시

//3
//2
//1

이와 같은 결과가 나오는 이유는 위에서 말했듯이 이벤트가 상위로 전달되기 때문이다. 만약 div.2 를 클릭했다면 //2 와 //1 순으로 이벤트가 동작하게 된다.

쉽게 말해 이벤트 버블링은 하위에서 상위 요소로 이벤트가 전파 되는 방식이다.

캡쳐링 Capturing

이벤트 버블링과는 반대되는 개념으로 생각하면 된다. 버블링에서는 하위에서 상위 요소로 이벤트가 전달되었다면 캡쳐링은 상위에서 아래로 전달된다.

이때 캡처링을 구현하기 위해서는 addEventListener() 사용 시 capture 값을 true 로 설정해주면 된다.

allDiv.forEach(function (e) {
  e.addEventListener("click", log, {
    capture: true,
  });
});

이렇게 설정해주면 이벤트 버블링과는 반대로 탐색하게 된다. 여기서 div.3 를 클릭하면

//div.3 클릭시

//1
//2
//3

아까와는 다르게 상위부터 동작한다.

stopPropagation()

만약 이벤트가 전파되는 것을 막고 싶다면 stopPropagation() 메소드를 이용해주면 된다.

function log(e) {
  e.stopPropagation();
  console.log(e.currentTarget.className);
}

그러면 버블링에서는 클릭한 요소의 이벤트만 발생시키고 상위요소로 전달하지 않으며 캡쳐링의 경우에는 최상위 요소의 이벤트만 동작시키고 하위요소로 전달하지 않는다.