차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:버블링 [2023/01/26 15:18]
emblim98 만듦
+++ wiki:javascript:javascript_note:버블링 [2023/01/26 16:13] (현재)
emblim98
@@ 줄 11: / 줄 11: @@
 ===== JavaScript 버블 =====
 <code javascript>
-<!DOCTYPE html>
-<html lang="en">
+    <style>
-<head>
+        body * {
-    <meta charset="UTF-8">
+            margin: 10px;
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            border: 1px solid blue;
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        }
-    <title>Bubbling</title>
+    </style>
-</head>
-<style>
-    body * {
-        margin: 10px;
-        border: 1px solid blue;
-    }
-</style>
 <body>
-<form onclick="alert('form')">FORM
+    <form onclick="alert('form')">FORM
-    <div onclick="alert('div')">DIV
+        <div onclick="alert('div')">DIV
-        <p onclick="alert('p')">P</p>
+            <p onclick="alert('p')">P</p>
-    </div>
+        </div>
-</form>
+    </form>
 </body>
-</html>
 </code>
 \\
-가장 안쪽의 ''**<p>**''태그를 클릭하면 아래와 같이 이벤트가 발생합니다.\\
+가장 안쪽의 ''**%%<p>%%**''태그를 클릭하면 아래와 같이 이벤트가 발생합니다.\\
-  - ''**<p>**''할당된 onclick 핸들러가 동작합니다.
+  - ''**%%<p>%%**''할당된 onclick 핸들러가 동작합니다.
-  - 외부의 ''**<div>**''에 할당된 핸들러가 동작합니다.
+  - 외부의 ''**%%<div>%%**''에 할당된 핸들러가 동작합니다.
-  - 그 외부의 ''**<form>**''에 할당된 핸들러가 동작합니다.
+  - 그 외부의 ''**%%<form>%%**''에 할당된 핸들러가 동작합니다.
-  - ''**document**'' 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.
+  - ''**%%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|}}\\
@@ 줄 55: / 줄 88: @@
 ===== 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

사용자 도구

사이트 도구

차이

문서 도구