Completing javascript 30 day 25 in own index file

tomgillard · tomgillard · commit d2ccf16870eb · 2017-08-17T14:51:12.000+10: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,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Understanding JavaScript's Capture</title>
+  <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>
+</head>
+<body class="bod">
+
+  <div class="one">
+    <div class="two">
+      <div class="three">
+      </div>
+    </div>
+  </div>
+
+  <button></button>
+
+  <script>
+    const divs = document.querySelectorAll('div');
+
+    const logText = function logText(e) {
+        // e.stopPropagation();
+        console.log(this.classList.value);
+    };
+
+    // capture runs function on the way DOWN the DOM - defaults to false
+    // once unbinds event listener after first time event listering is triggered
+    divs.forEach(div => div.addEventListener('click', logText, {
+      capture: false,
+      once: true
+    }));
+
+  </script>
+</body>
+</html>
