Commit 3df2610

committed

day 25

1 parent 9584279 commit 3df2610Copy full SHA for 3df2610

File tree

+77

-1

lines changed

+77

-1

lines changed

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -40,4 +40,5 @@ Motivate yourself to code daily till 30 days, and see the magic!`
`40`	`40`	`\| [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/) \|`
`41`	`41`	`\| [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/) \|`
`42`	`42`	`\| [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/) \|`
`43`		`-\| [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/) \|`
	`43`	`+\| [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/) \|`
	`44`	`+\| [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/) \|`

Lines changed: 8 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,8 @@`
	`1`	`+# Event Propogation, bubbling and once`
	`2`	`+`
	`3`	`+Demo app to clear the confusion between common terms related to event listeners.`
	`4`	`+1. Event bubbling : when working with nested elements eventlisteners start/listen to all the element inside out.`
	`5`	+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
	`6`	+3. There's one more interesting option called `once` which basically removes the eventlisterner after one time trigger.
	`7`	`+This could be useful in situation where you do not want users to keep clicking a button continuously ex. checkout button.`
	`8`	`+`

Lines changed: 67 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,67 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+<head>`
	`4`	`+ <meta charset="UTF-8">`
	`5`	`+ <title>Understanding JavaScript's Capture</title>`
	`6`	`+</head>`
	`7`	`+<body class="bod">`
	`8`	`+`
	`9`	`+ <div class="one">`
	`10`	`+ <div class="two">`
	`11`	`+ <div class="three">`
	`12`	`+ </div>`
	`13`	`+ </div>`
	`14`	`+ </div>`
	`15`	`+`
	`16`	`+<style>`
	`17`	`+ html {`
	`18`	`+ box-sizing: border-box;`
	`19`	`+ }`
	`20`	`+`
	`21`	`+ , :before, *:after {`
	`22`	`+ box-sizing: inherit;`
	`23`	`+ }`
	`24`	`+`
	`25`	`+ div {`
	`26`	`+ width: 100%;`
	`27`	`+ padding: 100px;`
	`28`	`+ }`
	`29`	`+`
	`30`	`+ .one {`
	`31`	`+ background: rgb(14, 1, 17);`
	`32`	`+ }`
	`33`	`+`
	`34`	`+ .two {`
	`35`	`+ background: rgb(75, 9, 2);`
	`36`	`+ }`
	`37`	`+`
	`38`	`+ .three {`
	`39`	`+ background: rgb(161, 46, 5);`
	`40`	`+ }`
	`41`	`+</style>`
	`42`	`+`
	`43`	`+<button></button>`
	`44`	`+<script>`
	`45`	`+ const divs = document.querySelectorAll('div');`
	`46`	`+ const button = document.querySelector('button');`
	`47`	`+`
	`48`	`+ function logText(e) {`
	`49`	`+ console.log(this.classList.value);`
	`50`	`+ // e.stopPropagation(); // stop bubbling!`
	`51`	`+ // console.log(this);`
	`52`	`+ }`
	`53`	`+`
	`54`	`+ divs.forEach(div => div.addEventListener('click', logText, {`
	`55`	`+ capture: false,`
	`56`	`+ once: true`
	`57`	`+ }));`
	`58`	`+`
	`59`	`+ button.addEventListener('click', () => {`
	`60`	`+ console.log('Click!!!');`
	`61`	`+ }, {`
	`62`	`+ once: true`
	`63`	`+ });`
	`64`	`+`
	`65`	`+</script>`
	`66`	`+</body>`
	`67`	`+</html>`

Comments

(0)