JavaScript 버블링

description : JavaScript 버블링
author : 오션
email : shlim@repia.com
lastupdate : 2023-01-26 Thu

JavaScript 버블

    <style>
        body * {
            margin: 10px;
            border: 1px solid blue;
        }
    </style>
<body>
 
    <form onclick="alert('form')">FORM
        <div onclick="alert('div')">DIV 
            <p onclick="alert('p')">P</p>
        </div>
    </form>
 
</body>

가장 안쪽의 <p>태그를 클릭하면 아래와 같이 이벤트가 발생합니다.

<p>할당된 onclick 핸들러가 동작합니다.
외부의 <div>에 할당된 핸들러가 동작합니다.
그 외부의 <form>에 할당된 핸들러가 동작합니다.
document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.

상기 방식으로 동작하기 때문에, <p> 요소를 클릭하면 p ⇒ div ⇒ form의 순서대로 발생하는 alert창이 표시됩니다.
이런 과정을 “버블링(bubbling)“이라고 하는데, 이는 물 속의 거품이 깊은 곳에서 얕은 곳으로 올라가는 것처럼
이벤트가 하위 요소에서 상위 부모 요소로 거슬러올라가며 발생하기 때문입니다.

거의 모든 이벤트는 버블링됩니다.
상기 문장에서 핵심은 “거의”입니다.
예를 들어, focus 이벤트는 버블링되지 않습니다. – 중략 –
focus 이벤트는 규칙이라기 보다는 하나의 예외입니다.
대부분의 이벤트는 버블링됩니다.

    <style>
        body * {
            margin: 10px;
            border: 1px solid blue;
        }
    </style>
    <body>
 
    <form onclick="alert('form')">FORM
        <div onclick="alert('div')">DIV 
            <p onclick="myFunction(event)">P</p>
        </div>
    </form>
 
    <p id="demo"></p>
 
    <script>
        function myFunction(event) {
            let x = event.bubbles;
            document.getElementById('demo').innerHTML = x;
        }
    </script>