From bd09853681b58664fc6bf3ec35afdf34c3402d3e Mon Sep 17 00:00:00 2001
From: Lisa Huang <lisa.yc.huang@gmail.com>
Date: Fri, 6 Jul 2018 22:11:24 -0700
Subject: [PATCH] Added  solution for Project 25 - Event Capture, Propagation,
 Bubbling, Once

---
 .../index-projectnotes.html                   | 91 +++++++++++++------
 1 file changed, 62 insertions(+), 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
index 98f5e070c4..5ac85ae994 100644
--- 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>
\ No newline at end of file
