Ex25 - Events capture, propagation, once

fthebaud · fthebaud · commit de8934e07031 · 2017-01-18T15:11:01.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 node_modules/
 *.log
 haters/
+.vscode
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,45 @@
+<!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 src="script.js" charset="utf-8"></script>
+
+</body>
+</html>
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/script.js b/25 - Event Capture, Propagation, Bubbling and Once/script.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const divs = document.querySelectorAll('div');
+
+function logText(event) {
+  console.log(this.classList.value);
+  // stop the propagation of the event
+  event.stopPropagation();
+}
+
+divs.forEach(div => div.addEventListener('click', logText, {
+  capture: false, // by default it's false (events are bubbling up)
+  once: true // will listen for a click once and then unbind itself (removeEventListener)
+}));

-Original file line number
+Diff line change
 node_modules/
 *.log
 haters/
 +.vscode