complete wesbos#25

YuriBrunetto · YuriBrunetto · commit 6ed409e9b91a · 2017-02-05T15:33:49.000-02: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,45 +1,58 @@
 <!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">
+  <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>
-  </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;
+      }
 
-  div {
-    width:100%;
-    padding:100px;
-  }
+      .three {
+        background:coral;
+      }
+    </style>
 
-  .one {
-    background: thistle;
-  }
+    <button></button>
 
-  .two {
-    background:mistyrose;
-  }
+    <script>
+      const divs = document.querySelectorAll('div')
 
-  .three {
-    background:coral;
-  }
-</style>
+      function logText(e) {
+        console.log(this.classList.value)
+        // e.stopPropagation() // stop bubbling
+      }
 
-<button></button>
-<script>
+      divs.forEach(div => div.addEventListener('click', logText, {
+        capture: false,
+        once: true
+      }))
+    </script>
 
-</script>
-</body>
+  </body>
 </html>
