day 25

fullstackNRJ · fullstackNRJ · commit 3df261099faa · 2020-05-01T14:15:52.000+05:30
diff --git a/README.md b/README.md
@@ -40,4 +40,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
 | [Day 21](./each%20day%20build%20day!/Day%2021/) | [Speech Recognition](./each%20day%20build%20day!/Day%2021/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2021/README.md/) |
 | [Day 22](./each%20day%20build%20day!/Day%2022/) | [Not to do list](./each%20day%20build%20day!/Day%2022/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2022/README.md/) |
 | [Day 23](./each%20day%20build%20day!/Day%2023/) | [Speedometer and Compass](./each%20day%20build%20day!/Day%2023/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2023/README.md/) |
-| [Day 24](./each%20day%20build%20day!/Day%2024/) | [Pointer Highlighter](./each%20day%20build%20day!/Day%2024/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2024/README.md/) |
+| [Day 24](./each%20day%20build%20day!/Day%2024/) | [Pointer Highlighter](./each%20day%20build%20day!/Day%2024/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2024/README.md/) |
+| [Day 25](./each%20day%20build%20day!/Day%2025/) | [Event bubbling, capture and once](./each%20day%20build%20day!/Day%2025/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2025/README.md/) |
diff --git a/each day build day!/Day 25/README.md b/each day build day!/Day 25/README.md
@@ -0,0 +1,8 @@
+# Event Propogation, bubbling and once
+
+Demo app to clear the confusion between common terms related to event listeners.
+1. Event bubbling : when working with nested elements eventlisteners start/listen to all the element inside out.
+2. Event Capture and Propogation : when option in eventlistener is set true it starts to listen from outside to inside. This propogation can be stopped all true by `stopPropogation()` method on events object
+3. There's one more interesting option called `once` which basically removes the eventlisterner after one time trigger.
+This could be useful in situation where you do not want users to keep clicking a button continuously ex. checkout button.
+
diff --git a/each day build day!/Day 25/index.html b/each day build day!/Day 25/index.html
@@ -0,0 +1,67 @@
+<!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: rgb(14, 1, 17);
+  }
+
+  .two {
+    background: rgb(75, 9, 2);
+  }
+
+  .three {
+    background: rgb(161, 46, 5);
+  }
+</style>
+
+<button></button>
+<script>
+  const divs = document.querySelectorAll('div');
+  const button = document.querySelector('button');
+
+  function logText(e) {
+    console.log(this.classList.value);
+    // e.stopPropagation(); // stop bubbling!
+    // console.log(this);
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false,
+    once: true
+  }));
+
+  button.addEventListener('click', () => {
+    console.log('Click!!!');
+  }, {
+    once: true
+  });
+
+</script>
+</body>
+</html>
