[ JS ] 이벤트 캡처링이란 ?

2023. 9. 20. 15:26

이벤트 캡처링 ( Event Capturing )에 대한 내용입니다.

이벤트 캡처링은 웹 개발에서 DOM( Document Object Model )내의 이벤트 전파의 또 다른 단계입니다.

이벤트 버블링을 보완하여 이벤트가 DOM 트리의 루트에서 타겟 요소로 이동할 때 이벤트를 캡처할 수 있는 방법을 제공합니다.

이벤트 캡처링은 이벤트가 타겟 요소에 도달하기 전에, 버블링 단계가 시작되기 전에 발생합니다.

이벤트 캡처링의 작동 방식

이벤트 오리진 ( Event Origin ): 버튼이나 div와 같은 특정 DOM 요소에서 이벤트가 트리거됩니다.
이벤트 캡처 단계 ( Event Capture Phase ): 이벤트는 대상 요소에서 시작하여 "버블업"하는 대신 먼저 캡처 단계로 들어가 DOM 트리의 루트에서 대상 요소로이동하여 각 상위 요소를 방문합니다.
이벤트 핸들러 ( Event Handlers ): 캡처 단계 동안 DOM 계층의 각 수준에서 요소에 특정 이벤트 유형 ( ex: 클릭 이벤트 핸들러 )에 대해 등록된 이벤트 핸들러가 있는 경우 해당 핸들러가 실행됩니다.
이벤트 대상 ( Event Target ): 이벤트가 대상 요소에 도달하면 대상 단계로 들어갑니다. 대상 단계에서는 대상 요소에 대한 이벤트 핸들러가 실행됩니다.
이벤트 버블링 단계 ( Event Bubbling Phase ): 이벤트가 캡처 단계를 통과하고 대상 요소에서 처리된 후 표준 이벤트 버블링 단계에서와 같이 DOM 계층 구조를 통해 버블링됩니다.

캡처 단계에 대한 이벤트 리스너를 등록하려면 세 번째 매개 변수가 true로 설정된 addEventListener 메서드를 사용할 수 있습니다.

기본적으로 세 번째 매개 변수는 false이므로 버블링 단계에 대해 이벤트를 등록되어야 함을 나타냅니다.

Javascript 이벤트 캡처의 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button id="inner">클릭!</button>
    </div>

    <script>
        const outerEle = document.getElementById("outer");
        const innerEle = document.getElementById("inner");

        outerEle.addEventListener("click", function () {
            console.log("Capture Phase - Outer div clicked");
        }, true);

        innerEle.addEventListener("click", function () {
            console.log("Capture Phase - Inner button clicked");
        }, true);
    </script>
</body>
</html>

위 내용은 아래와 같습니다.

클릭! 버튼을 클릭하면 버튼 자체에서 클릭 이벤트가 트리거 됩니다.
이벤트는 먼저 캡처 단계에 들어가고 버튼과 외부 div 모두 캡처 단계에 등록된 클릭 이벤트 리스너를 갖습니다.
결과적으로 캡처 단계 동안 콘솔에 "Capture Phase - Inner button clicked"및 "Capture Phase - Outer div clicked"라는 두 개의 콘솔 메시지가 표시됩니다.
캡처 단계가 끝나면 이벤트는 표준 이벤트 전파와 마찬가지로 대상 단계와 버블링 단계로 진행됩니다.

이벤트 캡처링은 웹 개발에서 이벤트 버블링보다 덜 일반적으로 사용되지만 대상 요소에 도달하기 전에 이벤트를 DOM 계층 맨 위에서 가로채려는 시나리오에서는 유용할 수 있습니다. 모든 이벤트가 이벤트 캡처를 지원하는 것은 아닙니다. 일부 이벤트는 버블링 단계를 통해서만 전파됩니다.

저작자표시 비영리 변경금지

'IT > IT ★★★' 카테고리의 다른 글

[ Web ] SSR과 CSR의 차이점 (0)	2023.10.02
[ JS \| TS ] 타입스크립트란 ? (0)	2023.09.25
[ JS ] 이벤트 버블링이란 ? (0)	2023.09.20
[ JS ] Local Storage, Session Storage, Cookies에 대하여 (1)	2023.09.15
[ JS ] this란 ? (0)	2023.09.14

코린이[코딩 어린이]