이벤트 버블링, 캡쳐 그리고 위임

03 Feb 2021

이벤트 버블링

이벤트 버블링은 상위 element에 event를 설정하면 하위element에서 상위element까지 순서대로 event가 실행되는 것을 의미합니다.

Example

<div class="test">
  <s class="test">
    <p class="test">test</p>
  </s>
</div>
<script>
  document.querySelectorAll(".test").forEach(element => 
    element.addEventListener('click', (event) => console.log(event.currentTarget.tagName)
  ))
</script>  

이렇게 element구성 한 후에 ptag를 클릭하면

P
S
DIV

이런식으로 출력이 됩니다. p -> s -> div 순으로 event가 전달되기 때문입니다. 하지만 모든 event가 버블링 되는 것은 아닙니다. focus()와 같은 event는 버블링 되지 않습니다.

버블링 중단하기

<body>
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>

이와 같이 하면 버블링을 중단시킬 수 있습니다. 버블링 중단이 꼭 필요한 경우가 아니면 중단 시키지 않는 것이 좋습니다.

이벤트 캡처링

이벤트 캡처링은 이벤트 버블링과의 반대 방향으로 흘러 갑니다. 타겟 element에서 이벤트를 발생시키면 상위 element부터 타겟 element로 단계별로 event가 전달되는 것을 의미합니다.

Example

<div class="test">
  <s class="test">
    <p class="test">test</p>
  </s>
</div>
<script>
  document.querySelectorAll(".test").forEach(element => 
    element.addEventListener('click', event => console.log(event.currentTarget.tagName), {capture : true}
  ))
</script>  

이렇게 element구성 한 후에 ptag를 클릭하면

DIV
S
P

이런식으로 출력이 됩니다.

이벤트 위임

캡쳐링과 버블링을 배운 것은 바로 이벤트 위임을 위한 준비 단계라고 할 수 있습니다.

이벤트 위임이란 상위 element에 핸들러를 설정한 후에 event.taget에 따라 다른 행동을 하게 할 수 있습니다. 즉 상위 element에 정한 이벤트 핸들러가 하위element에 전달되는 것 입니다.

Example

<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <div class="test">
        <p>test1</p>
        <p>test2</p>
        <P>test3</P>
    </div>
      <script>
        document.querySelector(".test").addEventListener('click', event => console.log(event.target.textContent))
      </script>     
  </body>
</html>

각 ptag를 클릭하면 자신이 가지고 있는 textContent를 출력할 수 있습니다.

ptag의 상위 element인 div에 이벤트 핸들러를 설정했지만 ptag도 그 이벤틀 핸들러를 위임 받아 사용했다고 할 수 있겠습니다.

event.target을 잘 이용하면 하나의 핸들러로 많은 종류의 이벤트를 설정할 수 있습니다.

정리

표준 DOM 이벤트가 전달되는 과정 3가지

캡쳐링 - 상위 element에서 하위element로 전달
타겟 - 타겟element에 전달
버블링 - 하위element에서 상위element로 전달

캡쳐링은 쓸일이 거의 없기 때문에 크게 개의치 않아도 되지만 버블링은 자주 사용된다. 그리고 버블링 중단은 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋다.

캡쳐링과 버블링은 이벤트 위임을 위한 초석이었다.

이벤트 위임을 잘 이용하면 매우 간단하게 많은 이벤트를 구현할 수 있습니다.

출처

https://ko.javascript.info/bubbling-and-capturing

https://ko.javascript.info/event-delegation

MancityBallboy 흔적 남기기

이벤트 버블링, 캡쳐 그리고 위임