goodmanship
diff --git a/Collapse file
‎25 - Event Capture, Propagation, Bubbling and Once/index-RIO.html‎
Copy file name to clipboard
+52Lines changed: 52 additions & 0 deletions b/Collapse file
‎25 - Event Capture, Propagation, Bubbling and Once/index-RIO.html‎
Copy file name to clipboard
+52Lines changed: 52 additions & 0 deletions
@@ -0,0 +1,52 @@
+<!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>
+  const divs = document.querySelectorAll('div')
+
+  function logText(e) {
+    // e.stopPropagation()
+    console.log(this.classList.value)
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {capture: false, once: true}))
+</script>
+</body>
+</html>