alexxloo
diff --git a/‎25 - Event Capture, Propagation, Bubbling and Once/index.html‎
Lines changed: 63 additions & 0 deletions b/‎25 - Event Capture, Propagation, Bubbling and Once/index.html‎
Lines changed: 63 additions & 0 deletions
@@ -0,0 +1,63 @@
+<!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 class="button"></button>
+<script>
+  let divs = document.querySelectorAll('div');
+  let button = document.querySelector('button');
+  divs.forEach(div => div.addEventListener('click', logText, {
+    once: false,
+    capture: true
+  })
+  );
+
+  button.addEventListener('click',logText,{
+    once: true
+  });
+
+  function logText(e) {
+    console.log(this.classList.value);
+    e.stopPropagation();
+  }
+</script>
+</body>
+</html>