문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== JavaScript 버블링 ======
<WRAP left notice 70%>
  * description : JavaScript 버블링
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2023-01-26 Thu
</WRAP>
<WRAP clear></WRAP>
\\

===== JavaScript 버블 =====
<code 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>

</code>
\\
가장 안쪽의 ''**%%<p>%%**''태그를 클릭하면 아래와 같이 이벤트가 발생합니다.\\
  - ''**%%<p>%%**''할당된 onclick 핸들러가 동작합니다.
  - 외부의 ''**%%<div>%%**''에 할당된 핸들러가 동작합니다.
  - 그 외부의 ''**%%<form>%%**''에 할당된 핸들러가 동작합니다.
  - ''**%%document%%**'' 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.
\\
{{:wiki:javascript:javascript_note:bubbling1.png?600|bubbling 1단계}}\\
{{:wiki:javascript:javascript_note:bubbling2.png?600|bubbling 2단계}}\\
{{:wiki:javascript:javascript_note:bubbling3.png?600|bubbling 3단계}}\\
{{:wiki:javascript:javascript_note:bubbling7.png?500|출처 - JavaScript Info}}\\
\\
상기 방식으로 동작하기 때문에, ''**%%<p>%%**'' 요소를 클릭하면 ''**%%p ⇒ div ⇒ form%%**''의 순서대로 발생하는 alert창이 표시됩니다.\\
이런 과정을 "버블링(bubbling)"이라고 하는데, 이는 물 속의 거품이 깊은 곳에서 얕은 곳으로 올라가는 것처럼\\
이벤트가 하위 요소에서 상위 부모 요소로 거슬러올라가며 발생하기 때문입니다.\\

{{:wiki:javascript:javascript_note:bubbling8.png?500|출처 - JavaScript Info}}\\
**거의 모든 이벤트는 버블링됩니다.**\\
상기 문장에서 핵심은 **"거의"**입니다.\\
예를 들어, **''%%focus%%''** 이벤트는 버블링되지 않습니다. -- 중략 --\\
**''%%focus%%''** 이벤트는 규칙이라기 보다는 하나의 예외입니다.\\
대부분의 이벤트는 버블링됩니다.\\


\\
<code javascript>
    <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>
</code>
\\
{{:wiki:javascript:javascript_note:bubbling4.png?600|}}\\
{{:wiki:javascript:javascript_note:bubbling5.png?600|}}\\
{{:wiki:javascript:javascript_note:bubbling6.png?600|}}\\




===== Ref Link ====
[[https://ko.javascript.info/bubbling-and-capturing|버블링과 캡처링]]\\
[[https://www.w3schools.com/jsref/event_bubbles.asp|bubbles Event Property]]\\



{{tag> 오션 Javascript Bubbling bubble}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구