📚 이벤트 버블링

📕 이벤트 버블링이란?

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

---

📕 이벤트 버블링 예제

<div
    onClick={() => {
        setModalIsOpen(true);
        console.log("모달창 켜기");
    }}
>
    div
    <Modal
        isOpen={modalIsOpen}
        ariaHideApp={false}
        onRequestClose={() => {
            setModalIsOpen(false);
            console.log("모달창 끄기");
        }}
    >
        더 보기 모달창입니다.
    </Modal>
</div>

div를 클릭하면 모달창이 켜지는 코드이다. 문제는 모달창 밖을 클릭하거나 esc를 누르면 모달창이 꺼져야 하지만 끔과 동시에 켜지기 때문에 모달창이 사라지지 않는 문제가 생겼다.

---

📕 이벤트 전파 막기

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

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

onRequestClose={(event) => {
    setModalIsOpen(false);
    event.stopPropagation(); // 이벤트 버블링 방지
}}

---

📕출처

https://velog.io/@tlatjdgh3778/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A0%95%EB%A6%AC#1-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81event-bubbling