Thanks for the elaboration! I was reading Jon Duckett's JS book and couldn't find an explanation to what happens when the boolean values are mixed like in your example. All clear now!
thanks a lot Capturing phase - the event goes down to the element. Target phase - the event reached the target element. Bubbling phase - the event bubbles up from the element. elem.addEventListener( event, callack, capture) If it’s false (default), then the handler is set on the bubbling phase. If it’s true, then the handler is set on the capturing phase. event.stopPropagation() stops the bubbling
hats off to you sir i watched lot of videos but nobody explained this topic in depth you explained it with simple example thank you so much lots of love from kashmir
You are exceptional. I started with Javascript Namaste and now I can not get enough. I have to find old videos to learn as much as I can. Thank you so much for such great effort.
Today, i was trying to write same code mentioned in this tutorial, but I made slight change like Instead of keeping script tag bottom of page before body ends, I added it at head tag. and I start getting errors. After that I start googling why this is happening then I came to know that if I am using script tag on head then I need to pass defer argument along with it to made HTML parse first and load the DOM properly before execution of script. Thanks akshay for keeping defer and async method before this method, so I am able to relate why I need to use defer in this case.
Just an add-on topic to read on is e.preventDefault() and passive event listeners. The former is to prevent the default action that the browser performs on that event and later is a way to remove the scroller janky and improve scroller performance on mousewheel/touchstart event by telling the browser to go ahead and perform scroll without waiting for the callback method to execute first.
Dude, This is a gunshot explanation. Even a baby can understand and can never forget. You rock !!! Can you give the base idea of how you learned MERN? What all resources you followed in becoming a Full Stack Developer at Uber.
As of now I'm preparing myself for good companies and I'm frontend developer . So the question is if I'll go for big companies like uber, ola, microsoft, Amazon, linkedin so what is the possibility to ask the question in data structure or I should focus only on JavaScript coz previous time didn't get any questions from ds in amazon. Your reply will fruit full.
Akshay sir, i am in love with u.... the concept that u gave me is beyond my explanation.... really thanks to ur effort that u put to deliever this kind of quality stuffs....
Hiii Akshay, because of you only I jumped into WebGIS from GIS Domain. You are such a savior man! Keep it up and help me to become master in JavaScript. Huge respect from my side!
Great job Akshay, I really admire you 👌🏽 I wish to be like you one day! One extra tip Always create a separate named function block and then pass it into addEventListener, cause if you want to remove it later, cause definiton will always be treated differently. eg_ ELEMENT.removeEventListener("click", functionName)
You nailed it bro...First time i thought if i can hit this vdo as many like as i can. Waiting for new video of namaste javascript series. Keep it up🙌🙌❤️
Hi Akshay , your videos are really helpful there is more clarity in the content you provide but I know u might be busy at your work but please keep posting videos continuing because I just wait for this. Thanks
Thank you Akshay for such a clear explanation of the concept. Great ♥️ for that. It's really beneficial to beginners like me. And a small question.. Can you please mention the practical use case where we need this. (Please do pin the answer so that it will be helpful for the people having the same question.)
Please make videos on where all these concepts are used/applicable in real time... Would be even more helpful in understanding the concepts.. Thanks for this btw
🎯 Key Takeaways for quick navigation: 00:00 🚀 *Introduction to Async/Await* - Async/Await is crucial for JavaScript developers, offering benefits for daily coding and interviews. - The upcoming topics include understanding async, await, their behind-the-scenes workings, real-life examples, error handling, and their role in interviews. 03:34 💻 *Async Function Basics* - Async functions always return a promise. - They wrap non-promise returns in a promise automatically. 11:09 🔄 *Handling Promises with Await* - `await` is a keyword used only inside async functions to handle promises. - It allows the program to wait for the promise resolution before moving to the next line. 19:39 ⌛ *Difference in Execution Flow* - Without async/await, JavaScript doesn't wait for promises to resolve; it continues execution. - With async/await, the program halts at the `await` line, waiting for promise resolution. 23:11 🤯 *Impact on Program Flow* - Adding a console log before the `await` line shows that JavaScript executes lines before `await` and then waits for the promise, altering the program flow. 24:45 🤔 *Understanding async/await fundamentals: Async/await causes the program to wait at that point in time, allowing asynchronous operations to complete before continuing.* 29:22 🔄 *Async function behavior with multiple promises: Async function seems to wait for all promises to complete before logging, creating confusion. It actually suspends execution and continues when promises resolve.* 30:44 🤯 *Order of promise resolution matters: The order in which promises are resolved affects the program's behavior. Reversing the order of promises leads to different execution outcomes.* 37:22 ⏸️ *Async execution suspension: Async function execution suspends at 'await' points, allowing other tasks to be handled, emphasizing that JavaScript doesn't truly wait.* 47:51 🚀 *Behind the scenes of async/await: A deep dive intohow async/await works, illustrating the suspension of function execution, the role of the call stack, and JavaScript's handling of asynchronous tasks.* 49:05 🌐 *Fetch function used for API calls; demonstrates making a call to GitHub's user API.* 51:09 🚀 *Understanding async/await: Use 'await' with 'fetch,' which returns a promise, to handle asynchronous data retrieval.* 56:10 ⚠️ *Error handling: Demonstrates error handling in async/await using a try-catch block or chaining a 'catch' method.* 58:52 🤔 *Interview tips: Explains how to tackle async/await questions in interviews, emphasizing clear explanations and providing examples.* 01:05:03 🔄 *Async/await vs. .then/.catch: Async/await is syntactic sugar over promises; personal preference, but async/await is recommended for its readability.* Made with HARPA AI
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Guess i need to write a script to auto-like all your videos because you deserve one.
Great job sir :P
Yeah Exactly. What a man he is!
My Eye Opener for JS
document.querySelector("#top-level-buttons-computed > ytd-toggle-button-renderer:nth-child(1)").click()
@@kiranvaddy7302 It works but the like button color doesn't change. Any idea why?
I think you are not using proper propagation… try to use event capturing 😂😂
Still relevant in 2024
Thanks for the elaboration! I was reading Jon Duckett's JS book and couldn't find an explanation to what happens when the boolean values are mixed like in your example. All clear now!
thanks a lot
Capturing phase - the event goes down to the element.
Target phase - the event reached the target element.
Bubbling phase - the event bubbles up from the element.
elem.addEventListener( event, callack, capture)
If it’s false (default), then the handler is set on the bubbling phase.
If it’s true, then the handler is set on the capturing phase.
event.stopPropagation() stops the bubbling
Frontend?
I have a JavaScript-based interview in 3 weeks and this comes as a life-saver. Thankyousomuch.
Did u get the job? 😅
hats off to you sir i watched lot of videos but nobody explained this topic in depth you explained it with simple example thank you so much lots of love from kashmir
i seen this video after 4 years .its amazing .thats why people say "akshay bhaiya hai js god"
You are exceptional. I started with Javascript Namaste and now I can not get enough. I have to find old videos to learn as much as I can. Thank you so much for such great effort.
SIr you are the best guru for javascript for all.Thanks you so much for all you efforts. Love❤️ ans Support.
This video definitely deserve a SHOUT-OUT!! Awesome hands-on explanation of capturing and bubbling :)
You got my respect. Nice explanation since from the beginning of the demonstration :)
Very Well explained bro with practical explanation......Great work Akshay Bro.
Today, i was trying to write same code mentioned in this tutorial, but I made slight change like Instead of keeping script tag bottom of page before body ends, I added it at head tag. and I start getting errors. After that I start googling why this is happening then I came to know that if I am using script tag on head then I need to pass defer argument along with it to made HTML parse first and load the DOM properly before execution of script. Thanks akshay for keeping defer and async method before this method, so I am able to relate why I need to use defer in this case.
Great Great Great Video For Understanding Event Bubbling, Event Capturing & Event Propagation Handling In Javascript. ❤love it
I swear that this is the best explanation in youtube.
Just an add-on topic to read on is e.preventDefault() and passive event listeners. The former is to prevent the default action that the browser performs on that event and later is a way to remove the scroller janky and improve scroller performance on mousewheel/touchstart event by telling the browser to go ahead and perform scroll without waiting for the callback method to execute first.
men.. your words and examples can make any grade student undertand this type of concepts..awesome work!!!!
OOOhhhh is this this much easier to understand these concepts.... Thank you Akshay Saini.
amazing Dear Akshay, I've watched a lot of videos on propagation, but your instruction is excellent. Thanks you so much for the video.
You got yourself a sub, and a buyer, if you launch your course on Udemy..Btw you must be having a good teacher like yourself
Zabardast bhai......Capturing aur Bubbling cycle aur Stop Propagation bahut zabardast samjhaya hai
Great job. I love the way you ACTUALLY explain what is happening with the white board first. Emphasizing Bubble up and trickle down. Thanks for this.
Akshay, I feel like I'm back in school - this was an excellent lecture, thank you.
Dude, This is a gunshot explanation. Even a baby can understand and can never forget. You rock !!!
Can you give the base idea of how you learned MERN? What all resources you followed in becoming a Full Stack Developer at Uber.
Recently I found this question in amazon banglore interview that time I know the definition but today it's clear . Really appreciated.
As of now I'm preparing myself for good companies and I'm frontend developer . So the question is if I'll go for big companies like uber, ola, microsoft, Amazon, linkedin so what is the possibility to ask the question in data structure or I should focus only on JavaScript coz previous time didn't get any questions from ds in amazon. Your reply will fruit full.
Bro Ekdum Kdkkkkkk DIrect Concept Clear Ho Gaye
bro clean content ,easily understanding
Perfect bro..
All your examples are very clear and concise.. That I will always remember easily.. We want more concepts and videos..
Akshay all your contents are worthy and there is a neat explanation of topics /for a beginners like me
Your videos are very simple and informative. Anybody can understand by watching it. Please make more videos.
Akshay sir, i am in love with u.... the concept that u gave me is beyond my explanation.... really thanks to ur effort that u put to deliever this kind of quality stuffs....
Your videos like how a mother feeds her child 🍯.
🙏🙏🙏🙏🙏
Finally this concept explained well.. Thanks a lot ❤
It was amazing video. My interest level towards JavaScript is increasing by watching your videos. Thank you for sharing your knowledge.
Encounter best explanation of JS concepts on ur channel, kudos!!!
This is a great explanation! Thank you so much for this video. This video cleared all of my doubts about event propagation in JavaScript.
I just learn this concept in a very simple and precise way. Thanks Askhay💜💜.
the div#grandParent>div#Parent>div#Child part was new for me.
Thank you so much! Literally helped me debug my code. You are a life saver lol
Help me a lot to learn JavaScript ….simple nd clear explanation ..Thanks :)
Hiii Akshay, because of you only I jumped into WebGIS from GIS Domain. You are such a savior man! Keep it up and help me to become master in JavaScript. Huge respect from my side!
Explained effortlessly, great job Akshay
Very clear and well explained with many examples !!. Thank You, Akshay.
Great job Akshay, I really admire you 👌🏽
I wish to be like you one day!
One extra tip
Always create a separate named function block and then pass it into addEventListener,
cause if you want to remove it later, cause definiton will always be treated differently.
eg_ ELEMENT.removeEventListener("click", functionName)
This explanation really helped me in answering one of my interview questions in a more detailed way! Thanks Akshay. More power to you
Gjab bhai always listen eventlooop and bubling now i come to understand great bro
You nailed it bro...First time i thought if i can hit this vdo as many like as i can. Waiting for new video of namaste javascript series. Keep it up🙌🙌❤️
Amazing video, sir! you clearly meant it when you promised that the viewers wouldn't have to consult any other video for this concept. Thanks a lot
Simply AWESOME explanation.
What a great job you are doing!!.
Liked your knowledge and ability to simplify it for others.
RESPECT!!
Recently I found this question in my semester exam model paper🤦🏻♂️ ..
Now I got the concept cleared 👍
THANKS BROO
This was such a thorough explanation. Thanks!
Good job brother . Explanation of bubble is awesome. Keep making and attaching videos . Thanks 👍
Hi Akshay , your videos are really helpful there is more clarity in the content you provide but I know u might be busy at your work but please keep posting videos continuing because I just wait for this. Thanks
VERY VERY THANK YOU brother for sharing such a very useful video lesson...
sooper bhai..... U have made it piece of cake to understand these things
Wow...
Akshay....your are great person amazing silent explanation awesome bro i got methode..
This was very insightful! Thanks a bunch for this one!
Bhaiya you are really a gem for us❤❤❤❤
अद्भुत अकल्पनीय अविश्वसनीय
You are the real JS guru
You have brought back my LOVE for programming _/\_ _/\_ _/\_
one of the best explanation , thanks a lot, pressed the bell icon :D
i am right place to learn JS , so in think aur kya hi chahiye jivan best explanation thank you bhaiya
Thanks sir for this amazing video i Have deeply understand both of them.
You are truly Amazing!!! The way you explain is awesome!
Wonderfully explained, loved it! You are superb!!Thank you!❤
Hey Akshay, Thank you so much for sharing your information. That was really help for me.
Wow Thanks a lot Sir.
Very informative, we do not get these information directly
Crystal clear
I have a request
Please do these kind of videos on Angular as well
Thank you Akshay for such a clear explanation of the concept. Great ♥️ for that. It's really beneficial to beginners like me. And a small question..
Can you please mention the practical use case where we need this.
(Please do pin the answer so that it will be helpful for the people having the same question.)
very thorough explanation bhaiya..... great
Please make videos on where all these concepts are used/applicable in real time... Would be even more helpful in understanding the concepts.. Thanks for this btw
I liked before watching
another awesome one.
you simplified the event bubbling and capturing concept. ~thanks
🎯 Key Takeaways for quick navigation:
00:00 🚀 *Introduction to Async/Await*
- Async/Await is crucial for JavaScript developers, offering benefits for daily coding and interviews.
- The upcoming topics include understanding async, await, their behind-the-scenes workings, real-life examples, error handling, and their role in interviews.
03:34 💻 *Async Function Basics*
- Async functions always return a promise.
- They wrap non-promise returns in a promise automatically.
11:09 🔄 *Handling Promises with Await*
- `await` is a keyword used only inside async functions to handle promises.
- It allows the program to wait for the promise resolution before moving to the next line.
19:39 ⌛ *Difference in Execution Flow*
- Without async/await, JavaScript doesn't wait for promises to resolve; it continues execution.
- With async/await, the program halts at the `await` line, waiting for promise resolution.
23:11 🤯 *Impact on Program Flow*
- Adding a console log before the `await` line shows that JavaScript executes lines before `await` and then waits for the promise, altering the program flow.
24:45 🤔 *Understanding async/await fundamentals: Async/await causes the program to wait at that point in time, allowing asynchronous operations to complete before continuing.*
29:22 🔄 *Async function behavior with multiple promises: Async function seems to wait for all promises to complete before logging, creating confusion. It actually suspends execution and continues when promises resolve.*
30:44 🤯 *Order of promise resolution matters: The order in which promises are resolved affects the program's behavior. Reversing the order of promises leads to different execution outcomes.*
37:22 ⏸️ *Async execution suspension: Async function execution suspends at 'await' points, allowing other tasks to be handled, emphasizing that JavaScript doesn't truly wait.*
47:51 🚀 *Behind the scenes of async/await: A deep dive intohow async/await works, illustrating the suspension of function execution, the role of the call stack, and JavaScript's handling of asynchronous tasks.*
49:05 🌐 *Fetch function used for API calls; demonstrates making a call to GitHub's user API.*
51:09 🚀 *Understanding async/await: Use 'await' with 'fetch,' which returns a promise, to handle asynchronous data retrieval.*
56:10 ⚠️ *Error handling: Demonstrates error handling in async/await using a try-catch block or chaining a 'catch' method.*
58:52 🤔 *Interview tips: Explains how to tackle async/await questions in interviews, emphasizing clear explanations and providing examples.*
01:05:03 🔄 *Async/await vs. .then/.catch: Async/await is syntactic sugar over promises; personal preference, but async/await is recommended for its readability.*
Made with HARPA AI
Nicely explained, hats off to you!! You are really brilliant at teaching.
So clear
love from Pakistan
thank you so much bhai
Your video helped in a better understanding and clearer explanation. Thank you :)
It was too complicated before watching this video. Now its too easy.
Nicely explained Akshay. Thanks for the great content. I hope you make more such videos.
Sir you are just inspiration for us .. thank for sharing your experience
Sir i really liked your video the way u explained.. Thanku so much and God bless u
Very well understandable video... I am very clear about this topic now, thank you
It's very clear.
Thanks for this session.
Wowwww... amazing explanation 🙏🙏
Great Video. Now bubbling and capturing is easy peesy
Great Vlog .... I am learning major things from these videos... Thankyou ... Keep doing good job..
Thanks for this simple and thorough explanation
You have a great content , keep it up. Never thought these topics has a great impact.
Thank you so much for every video Akshay ❣
Nicely explained Akshay..Thanks..Keep it up.
In easiest way you have covered the concept
Liking your video is as good as giving attendance !
thanks for the crystal clear explanation ,it will be super helpful if you provide brief explanation at last in the video like you provide in closure
Best explanation, thanks Akshay Sain
I am 🥹addicted to your teaching. Everyday I am searching for which video I missed in the playlist.
amazing explanation akshay you'r the bestttt :)
greatwork....really suprised why there is so less subscriber
Akshay I was preparing for govt job for last 2 year.
Kindly suggest me how can I get job as frontend devloped job
Bahut acche se samjhaya bhai aapne
Complicated topic explained so easily.
Very detailed and simple explanation