Did problem wesbos#25

KlausTV · KlausTV · commit 3ba0bdecf034 · 2023-06-01T21:59:17.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,49 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Understanding JavaScript's Capture</title>
-  <link rel="icon" href="https://fav.farm/🔥" />
-</head>
-<body class="bod">
-
-  <div class="one">
-    <div class="two">
-      <div class="three">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Understanding JavaScript's Capture</title>
+    <link rel="icon" href="https://fav.farm/🔥" />
+  </head>
+  <body class="bod">
+    <div class="one">
+      <div class="two">
+        <div class="three"></div>
       </div>
     </div>
-  </div>
 
-<style>
-  html {
-    box-sizing: border-box;
-  }
+    <style>
+      html {
+        box-sizing: border-box;
+      }
 
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
 
-  div {
-    width: 100%;
-    padding: 100px;
-  }
+      div {
+        width: 100%;
+        padding: 100px;
+      }
 
-  .one {
-    background: thistle;
-  }
+      .one {
+        background: thistle;
+      }
 
-  .two {
-    background: mistyrose;
-  }
+      .two {
+        background: mistyrose;
+      }
 
-  .three {
-    background: coral;
-  }
-</style>
+      .three {
+        background: coral;
+      }
+    </style>
 
-<button></button>
-<script>
+    <button></button>
+    <script>
+      const divs = document.querySelectorAll("div");
+      function logText(e) {
+        console.log(this.classList.value);
+        e.stopPropagation();
+      }
 
-</script>
-</body>
+      divs.forEach((div) =>
+        div.addEventListener("click", logText, {
+          capture: false,
+          once: true,
+        })
+      );
+      button.addEventListener(
+        "click",
+        () => {
+          console.log("Clickkk");
+        },
+        {
+          once: true,
+        }
+      );
+    </script>
+  </body>
 </html>
