Added solution for Project 25 - Event Capture, Propagation, Bubbling,…

… Once
lisaychuang · Jul 7, 2018 · bd09853 · bd09853
1 parent 55b3ef4
commit bd09853
Showing 1 changed file with 62 additions and 29 deletions.
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-projectnotes.html b/25 - Event Capture, Propagation, Bubbling and Once/index-projectnotes.html
@@ -1,45 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>Understanding JavaScript's Capture</title>
+    <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 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;
-  }
+        div {
+            width: 100%;
+            padding: 100px;
+        }
 
-  .one {
-    background: thistle;
-  }
+        .one {
+            background: thistle;
+        }
 
-  .two {
-    background:mistyrose;
-  }
+        .two {
+            background: mistyrose;
+        }
 
-  .three {
-    background:coral;
-  }
-</style>
+        .three {
+            background: coral;
+        }
+    </style>
+
+    <button></button>
+</body>
 
-<button></button>
 <script>
+    const divs = document.querySelectorAll('div');
+    const button = document.querySelector('button');
+
+    function logText(e) {
+        console.log(this.classList.value);
 
+        // When clicking on an element, the browser triggers clicks up the chain and "bubbles"
+        // use stopPropagation() to stop bubbling up
+        e.stopPropagation();
+    };
+
+    divs.forEach(div => div.addEventListener('click', logText, {
+        // capture option triggers events downwards, by default eventListeners capture = false;
+        capture: false
+    }));
+
+    // Set once:true to only trigger event once, then unbind itself
+    // for example, use in cart checkout or payment
+    // button.removeEventListenere('click', logText)
+
+    button.addEventListener('click', () => {
+        console.log('Click button!!');
+    }, {
+            once: true
+        });
 </script>
-</body>
-</html>
+
+</html>