JavaScript의 이벤트 버블링 및 캡처

JavaScript에서는 이벤트 작업을 해본 적이 있어야 합니다. 이 기사에서는 이벤트의 두 가지 개념인 이벤트 버블링과 이벤트 캡처에 대해 알아봅니다. 이 두 개념은 모두 이벤트 흐름이라고도 하는 이벤트 전파와 관련이 있습니다.

소개

이러한 개념을 이해하기 위해 먼저 이벤트가 무엇인지 이해합시다. MDN에 따라 정의 이벤트는 프로그래밍 중인 시스템에서 발생하는 동작 또는 발생입니다. 시스템은 이벤트가 발생할 때 일종의 신호를 생성(또는 "실행")하고 동작을 수행할 수 있는 메커니즘을 제공합니다. 이벤트가 발생하면 자동으로 실행됩니다(즉, 일부 코드 실행). 친구에게 무언가를 하라는 신호를 보내는 것과 같이 생각할 수 있습니다. 신호를 보내면 친구가 그 일을 시작합니다.

이벤트 버블링과 이벤트 캡처라는 두 가지 주요 이벤트 모델이 있습니다.

이제 하나씩 이해해 봅시다-

이벤트 버블링

이벤트 버블링은 이벤트 핸들러가 다른 요소에 중첩된 이벤트 핸들러를 호출하는 개념입니다. 버블링은 이벤트가 요소에서 실제로 발생할 때 발생합니다. 먼저 자체에서 이벤트를 처리한 다음 상위(있는 경우)에서 이벤트를 처리하고 본문과 루트 요소에 도달할 때까지 계속됩니다.

이해를 돕기 위해 예를 들어 보겠습니다.

다음은 HTML 스니펫입니다.

  <div id="grandparent">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>

여기에 이벤트 리스너를 추가했습니다.

       grandparent.addEventListener("click", (event) => {
            console.log("Grandparent clicked.");
        })
        parent.addEventListener("click", (event) => {
            console.log("parent clicked.");
        })
        child.addEventListener("click", (event) => {
            console.log("child clicked.");
        })

이제 하위 요소를 클릭하면 다음과 유사한 출력이 표시됩니다.



여기에서 볼 수 있듯이 이벤트는 자식에서 부모, 조부모로 트리거되므로 Bubbling 모델에서 이벤트는 모든 조상을 포함하는 가장 안쪽 요소에서 트리거됩니다. 이것은 탄산음료에서 거품이 아래에서 위로 올라가는 것과 같다고 해서 버블링이라는 이름이 붙었습니다.

이벤트 캡처

이것은 버블링의 정반대입니다. 이벤트 캡처링 모델에서 이벤트는 가장 구체적인 요소에서 시작하여 가장 구체적인 요소를 향해 아래로 흐릅니다. 이는 이벤트가 조부모에서 부모, 자식으로 트리거됨을 의미합니다.

캡처 모델을 사용하려면 true 함수의 세 번째 인수 위치에 addEventListner를 전달해야 합니다.

다음은 JS 코드 스니펫입니다.

        grandparent.addEventListener("click", (event) => {
            console.log("Grandparent clicked.");
        }, true)
        parent.addEventListener("click", (event) => {
            console.log("parent clicked.");
        }, true)
        child.addEventListener("click", (event) => {
            console.log("child clicked.");
        }, true)

다음 이미지로도 두 모델을 모두 이해할 수 있습니다.



생각나는건 여기까지이고, 앞으로 더 추가할 예정입니다. 읽어 주셔서 감사합니다.