finished challenge

rwoster · rwoster · commit f26aba5d96ea · 2022-09-01T15:53:10.000-04:00
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
@@ -1,48 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Understanding JavaScript's Capture</title>
-</head>
-<body class="bod">
-
-  <div class="one">
-    <div class="two">
-      <div class="three">
-      </div>
-    </div>
-  </div>
-
-<style>
-  html {
-    box-sizing: border-box;
-  }
-  
-  *, *:before, *:after { 
-    box-sizing: inherit; 
-  }
-
-  div {
-    width: 100%;
-    padding: 100px;
-  }
-
-  .one {
-    background: thistle;
-  }
-
-  .two {
-    background: mistyrose;
-  }
-
-  .three {
-    background: coral;
-  }
-</style>
-
-<button></button>
-<script>
-
-</script>
-</body>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Understanding JavaScript's Capture</title>
+    </head>
+    <body class="bod">
+        <div class="one">
+            <div class="two">
+                <div class="three"></div>
+            </div>
+        </div>
+
+        <style>
+            html {
+                box-sizing: border-box;
+            }
+
+            *,
+            *:before,
+            *:after {
+                box-sizing: inherit;
+            }
+
+            div {
+                width: 100%;
+                padding: 100px;
+            }
+
+            .one {
+                background: thistle;
+            }
+
+            .two {
+                background: mistyrose;
+            }
+
+            .three {
+                background: coral;
+            }
+        </style>
+
+        <button>button</button>
+        <script>
+            const divs = document.querySelectorAll("div");
+            const btn = document.querySelector("button");
+
+            function logText(e) {
+                console.log(this.classList.value);
+            }
+
+            // btn event listener
+            btn.addEventListener("click", logText, { once: true });
+            // event listeners on all the divs
+            divs.forEach((div) => {
+                /* default mode is bubble up from e.target */
+                // div.addEventListener("click", logText, { capture: false });
+
+                /* `{capture: true}` zooms in to e.target */
+                // div.addEventListener("click", logText, { capture: true });
+
+                /* `{once: true}` disables EL after first firing */
+                div.addEventListener("click", logText, { once: true });
+            });
+        </script>
+    </body>
 </html>
