이벤트 버블링 & 캡처링

이벤트 버블링 (Event Bubbling)

이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.

이벤트 캡처링 ()

캡처링은 버블링과는 반대라고 생각하면 된다. 최상위 부모 태그에서 해당 태그를 찾아 내려간다. (잘 쓰이지 않는다.)

이벤트 버블링 or 캡처링을 막는 법

버블링은 해당 타깃에서 document 객체를 만날 때까지 핸들러가 모두 호출되는데 코드를 작성하다보면 원하는 타깃에서만 이벤트를 발생하게 하고 싶을때가 있다.

그럴 때에는 event.stopPropagation() 을 사용하면 되는데 버블링의 경우에는 클릭한 타깃의 이벤트만 발생하고 상위 요소로 이벤트가 전파되는 것을 막을 수 있다.

나는 프로젝트에서 모달창의 닫기 버튼과 바깥영역을 클릭하면 모달이 닫히도록 구현할 때 활용하였다.

// react 로 작성 
const [mapModal, setMapModal] = useState(false);
const modalHandler = () => {
  setMapModal(!mapModal);
};

// retrun 되는 html 
<div onClick={modalHandler}>
  <div onClick={(e) => e.stopPropagation()}>
    <div>
      <button onClick={modalHandler}>
        <BsXLg />
      </button>
    </div>
    <div id="map"></div>
    <div>
      <div>{businessAddress}</div>
    </div>
    <div>{businessName}</div>
  </div>
</div>

구현 예시는 다음과 같다

---

레퍼런스 :

https://transang.me/everything-about-event-bubbling/