Play around with event propagation

vais · vais · commit 174bae4af34e · 2022-08-31T22:42:31.000-04:00
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index.html b/25 - Event Capture, Propagation, Bubbling and Once/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title></title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+      div {
+        height: 100%;
+        padding: 50px;
+      }
+      div.one {
+        background-color: #555;
+      }
+      div.two {
+        background-color: #888;
+      }
+      div.three {
+        background-color: #cacaca;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="one">
+      <div class="two">
+        <div class="three"></div>
+      </div>
+    </div>
+    <script>
+      function handleClick(e) {
+        console.log(e.currentTarget);
+        e.stopPropagation();
+      }
+
+      document.querySelectorAll("div").forEach((div) => {
+        div.addEventListener("click", handleClick, {
+          capture: true,
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/index.md b/index.md
@@ -24,3 +24,4 @@
 22. [Follow Along Link Highlighter](https://vais.github.io/JavaScript30/22 - Follow Along Link Highlighter/index.html)
 23. [Speech Synthesis](https://vais.github.io/JavaScript30/23 - Speech Synthesis/index.html)
 24. [Sticky Nav](https://vais.github.io/JavaScript30/24 - Sticky Nav/index.html)
+25. [Event Capture, Propagation, Bubbling and Once](https://vais.github.io/JavaScript30/25 - Event Capture, Propagation, Bubbling and Once/index.html)
