Day 25: Event Capture, Propagation, Bubbling and Once

ilokeshghosh · Oct 6, 2023 · 3d32b33 · 3d32b33
1 parent 7a9a511
commit 3d32b33
Showing 1 changed file with 67 additions and 0 deletions.
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,67 @@
+<!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">
+      </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>
+
+const divs = document.querySelectorAll('div');
+
+function logText(e){
+    console.log(this.classList.value);
+
+    // e.stopPropagation();
+}
+
+
+divs.forEach(div=> div.addEventListener('click', logText, {
+    capture:false,
+    once:true
+}))
+
+
+const button = document.querySelector('button');
+button.innerHTML='click me';
+button.addEventListener('click', ()=> console.log('you can click only once'),{once:true})
+</script>
+</body>
+</html>