Event 전달 방식

Posted Mar 18, 2024

By KIM YEONGBEOM

3 min read

Event 를 전달하는 방식

addEventListener() 를 사용해보고, 어떻게 이벤트를 감지하는지 궁금해졌는데 브라우저에서 이를 전파하는 방식이 두 가지가 있다고 해서 정리해보았다.

두 가지 방식의 이름은 다음과 같다.

이벤트 캡쳐링(Event Capturing)
이벤트 버블링(Event Bubbling)

크게 두 가지로 나눌 수 있다.

바로 이벤트 캡쳐링 방식 먼저 예시로 살펴보자.

이벤트 캡쳐링

  
  <head>
    <style>
        div {
            border: 1px solid red;
        }
        div p {
            border: 1px solid orange;
        }
        div p span {
            border: 1px solid green;
        }
    </style>
  </head>
  <body>
    <div>div
        <p>p
            <span>span</span>
        </p>
    </div>

    <h4></h4>
    <script>
        function handleDivClick(params) {
            result.innerHTML += `div clicked <br>`
        }
        function handlePClick(params) {
            result.innerHTML += `p clicked <br>`
        }
        function handleSpanClick(params) {
            result.innerHTML += `span clicked <br>`
        }

        result = document.querySelector("h4");

        divBox = document.querySelector("div");
        pBox = document.querySelector("p");
        spanBox = document.querySelector("span");

        // 

        divBox.addEventListener("click", handleDivClick, true);
        pBox.addEventListener("click", handlePClick, true);
        spanBox.addEventListener("click", handleSpanClick, true);
    </script>
  </body>

이 코드를 실행하면, 아래와 같은 결과가 나타난다.

가장 바깥의 div 에서 먼저 감지하고, 다음으로 p 에서 감지한 뒤, span 에 도달하는 방식이다. 이러한 방식이 이벤트 캡쳐링 방식이다. 기본 값으로 사용되는 감지 방법이며, 가장 최상위인 DOM 객체로 부터 전파되는 방식이다. DOM 객체에 대해서는 다음에 더 자세하게 다루어보자.

다른 방식인 이벤트 버블링 방식이다. 이벤트 버블링 방식을 사용하려면, addEventListener 함수에 세 번째 인자를 false 로 변경하는 방식이 있다.

이벤트 버블링

  
  <script>
    divBox.addEventListener("click", handleDivClick, false);
    pBox.addEventListener("click", handlePClick, false);
    spanBox.addEventListener("click", handleSpanClick), false;
  </script>

이벤트 버블링은 캡쳐링과 달리, 최하위 요소부터 상위 요소로 전달되는 방식이다.

이러한 전파 방식을 사용하는 까닭은?

위 예시처럼, div > p > span 의 영역이 서로 겹칠 때 브라우저는 어떤 영역을 클릭했는지 알 수 없기 때문에 일일이 전파하는 방식을 사용한다. 실제로 사용할 때는, 필요한 부분에만 이벤트리스너를 추가해 사용하겠지만 나의 이해를 위해 참고해서 예시를 작성해보았다.

Development, Web

This post is licensed under CC BY 4.0 by the author.

Event 를 전달하는 방식

Trending Tags