이벤트 전파

자바스크립트의 이벤트는 전파되는 특성을 가지고 있습니다. 이 전파되는 방식에는 상위요소에서 하위요소로 내려가는 Capture과 하위요소에서 상위요소로 올라가며 전파되는Bubble이 있습니다.

아래 사이트를 이용해 조금 더 쉽게 익힐 수 있겠습니다.

DOM EVENT

또한 리액트, 뷰 등의 사용해 개발을 하다보면 이러한 이벤트 버블링, 캡쳐링으로 인해 예상치 못한 장애가 생길 수도 있습니다.

이번 포스팅에서는 이벤트 전파 방법인 Capture와 Bubble에 대해 살펴보도록 하겠습니다.

1. 이벤트 버블링

버블링은 표현 그대로 거품처럼 위로 올라간다라고 생각을 할 수 있습니다. 즉 이벤트가 하위요소에서 발생했을 때 하위요소에서 상위요소로 계속 전파가 되게 되는 것입니다.

예시를 통해 공부해보도록 하겠습니다.

  <article>
    ARTICLE
    <div>
      DIV
      <p>
        P
        <br />
        <button>BUTTON</button>
      </p>
    </div>
  </article>

  const article = document.querySelector('article')
  const division = document.querySelector('division')
  const paragraph = document.querySelector('paragraph')
  const button = document.querySelector('button')

  article.addEventListener('click', () => window.alert('article'))
  division.addEventListener('click', () => window.alert('division'))
  paragraph.addEventListener('click', () => window.alert('paragraph'))
  button.addEventListener('click', () => window.alert('button'))

버튼을 클릭하면 버튼 -> p -> div -> article 순으로 경고창이 뜨는 것을 확인할 수 있습니다. 이렇게 상위요소에 속한 하위요소를 클릭하는 경우 상위요소까지 타고 올라가며 이벤트 버블링이 일어나게 됩니다.

이 이벤트 버블링을 방지하기 위해서 사용할 수 있는 방법이 있습니다.

  button.addEventListener('click', (evnet) => {
    event.stopPropagation();
    window.alert('button')
  })

event객체의 메서드인 stopPropagation()을 사용하면 해당 요소의 이벤트버블링을 막을 수 있습니다.

2. 이벤트 캡쳐링

이벤트 캡쳐링은addEventLstener의 세번째 매개변수의 capture 옵션을 true 로 설정하면 이벤트 버블링과 반대 방향으로 탐색하게됩니다. 이렇게 상위요소에서 하위요소까지 내려가는 전파방식을 이벤트 캡쳐링이라고 합니다.

 <div>
    <h1>장바구니</h1>
    <ul>
      <li>노트북</li>
      <li>모니터</li>
      <li>책상</li>
      <li>의자</li>
      <li>키보드</li>
      <li>마우스</li>
    </ul>
  </div>

  const container = document.querySelector('div')
  const list = document.querySelector('ul')

  container.addEventListener('click', (e) => {
    console.error('div에 이벤트 발생')
    e.target.style.background = 'blue'
  })

  list.addEventListener('click', (e) => {
    console.warn('UL 이벤트 발생')
    e.target.style.background = 'red'
  })