Added Capture, Propagation, Bubbling, & Once (wesbos#25)

JeffDess · JeffDess · commit 9946f353e712 · 2017-09-24T20:56:10.000-04:00
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Understanding JavaScript's Capture</title>
 </head>
+
 <body class="bod">
 
   <div class="one">
@@ -13,33 +15,55 @@
     </div>
   </div>
 
-<style>
-  html {
-    box-sizing: border-box;
-  }
-  *, *:before, *:after { box-sizing: inherit; }
+  <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>
 
-  div {
-    width:100%;
-    padding:100px;
-  }
+  <button>Click me!</button>
+  <script>
+    const divs = document.querySelectorAll('div');
+    const btn = document.querySelector('button');
 
-  .one {
-    background: thistle;
-  }
+    function logText(e) {
+      console.log(this.classList.value);
+      e.stopPropagation();
+    }
 
-  .two {
-    background:mistyrose;
-  }
 
-  .three {
-    background:coral;
-  }
-</style>
+    divs.forEach(div => div.addEventListener('click', logText, {
+      capture: false,
+      once: true
+    }));
 
-<button></button>
-<script>
-
-</script>
+    btn.addEventListener('click', () => console.log('You clicked the button!'), {
+      once: true
+    });
+  </script>
 </body>
-</html>
+
+</html>
