[ JS ] 이벤트 버블링이란 ?

2023. 9. 20. 13:57

이벤트 버블링 ( Event Bubbling )에 대한 내용입니다.

이벤트 버블링은 이벤트가 DOM( Document Object Model )계층을 통해 전파되거나 "버블업"되는 순서를 가리키는 자바스크립트 및 웹 개발의 기본 개념입니다. 이벤트가 DOM요소에서 발생할 때( ex: div 내의 버튼 클릭 이벤트 ) 이벤트는 해당 요소에서 트리거할 뿐만 아니라 상위 요소에서도 트리거되어 문서의 루트까지 전파합니다.

이벤트 버블링의 작동 방식

이벤트 오리진 ( Event Origin ): 버튼이나 div와 같은 특정 DOM 요소에서 이벤트가 트리거됩니다.
이벤트 전파 ( Event Propagation ): 대상 요소에서 이벤트가 트리거된 후 각 상위 요소를 차례로 방문하여 DOM 계층을 통해 "버블업"하기 시작합니다.
이벤트 핸들러 ( Event Handlers ): DOM 계층 구조의 각 수준에서 요소에 특정 이벤트 유형 ( ex: 클릭 이벤트 핸들러 )에 대해 등록된 이벤트 핸들러가 있는 경우 해당 핸들러가 실행됩니다.
버블링 계속 ( Continue Bubbling ): 이벤트는 문서의 루트( 일반적으로 html 요소 )에 도달할 때까지 계층 구조를 통해 계속 버블링됩니다.

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("Outer DIV 클릭");
        });

        innerEle.addEventListener("click", function () {
            console.log("Inner Button 클릭");
        });
    </script>
</body>
</html>

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

클릭! 버튼을 클릭하면 버튼 자체에서 클릭 이벤트가 발생하고 이벤트가 외부 div요소까지 버블링됩니다.
버튼과 외부 div 모두 클릭 이벤트 리스너가 있으므로 해당 이벤트 핸들러가 실행됩니다.
결과적으로 콘솔에 "Inner Button 클릭"과 "Outer DIV 클릭"이라는 두 개의 로그 메시지가 표시됩니다. 이는 이벤트가 DOM 계층 구조의 내부 요소에서 외부 요소로 전파되는 이벤트 버블링을 보여줍니다.

event.stopPropagation()

<!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("Outer DIV 클릭");
        });

        innerEle.addEventListener("click", function () {
            console.log("Inner Button 클릭");

            event.stopPropagation();
        });
    </script>
</body>
</html>

이벤트 버블링을 방지하고 이벤트가 계층 위로 더 이상 전파되지 않도록 하려면 이벤트 핸들러 내의 이벤트 개체에서 stopPropagation() 메서드를 사용할 수 있습니다.

위 내용에서는 Inner Button 클릭만 콘솔에 표시되고, Outer DIV 클릭 콘솔은 나오지 않습니다.

이벤트 버블링은 기본 동작이지만 모든 이벤트가 버블업 되는 것은 아닙니다. ( ex: focus, blur 이벤트는 버블링 되지 않습니다. )

또한 event.preventDefault()를 사용하여 일부 이벤트를 취소할 수 있습니다. 이벤트 버블링을 이해하는 것은 복잡한 웹 응용 프로그램에서 이벤트 처리를 관리하고 이벤트 중심 코드를 최적화하는 데 중요합니다.

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

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

[ 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
[ JS ] Closure란 ? (0)	2023.09.14

코린이[코딩 어린이]