Benefits of event delegation: 1) improves memory space 2) mitigates risk of performance bottle neck 3) Dom manipulation 4) when elements get added dynamically, the process of adding events is slow Limitations: 1) All the events are not bubbled up, some events like blur, focus are not bubbled up 2) if e.stopPropogation is used in child, then events are not bubbled up
i know im randomly asking but does someone know of a trick to log back into an instagram account? I stupidly forgot my password. I would appreciate any tricks you can give me!
I have been terrified of frontend questions in fullstack positions but your videos have given me so much clarity and insight into the working of JS. Thanks a lot Akshay.
Benefits of event delegation. 1.Less memory usage. 2.Mitigates risk of performance bottleneck. 3.Instead of writing multiple event listener task can be done in single event listener so writing less code is also a benefit 4.When elements are dynamically added ,so adding events to the element is slow so event delegation eventually takes care of it. Limitation 1.Not all events support event delegation. 2.If stoppropogation is used on child elements eventually event delegation would not work.
You are absolutely right !! it opened my eyes when I actually understood this concept :) No tutorial/ video ever explained delegation this way. Can't thank more Akshay. God bless you.
after namaste javascript, this frontend interview question playlist had helped me a lot. I can apply this things in my work as well as ace my interviews. All thanks to YOU, sir
Thanks, Akshay for this perfect explanation... Also, Being a full-stack developer and like me, a lot many FS devs keep ignoring CSS because it needs a proper understanding of not just the target element as well as the effects passed on from parents in the hierarchy. Overall, CSS being a secondary skill for this reason as well, it's not focused much in tech Interviews. But, I feel it is much-required skills to deliver a quality products. If you've cracked CSS properties' relations with its parents in the hierarchy, I'm sure huge junta including me would like to learn it from you!...
Thanks Akshay for awesome explanation of each topic. I have gone through your event bubbling and capturing video before this one. I think your first example regarding categories is the best example of enabling event capturing. Since we are attaching event handlers to parent - instead of events bubbling from child to parent, we can enable useCapture property and can stop delegation to child elements for better performance using e.stopPropagation().
In CSS, we use as event delegation mean, we assign our base tag's href for all tags in that page. This is just analogy for those who know but not Event Delegation. 😕
Really useful information and very well explained lectures. One of the best channel to prepare for front end interviews. Thank you so much for creating this channel.
You're absolutely right Souvik and the people who write frameworks are just like us, it's just that they understand these core concepts very well and how things work under the hood. Keep on learning these basic concepts and slowly everything will make sense and you will get a lot more wow moments. :)
second example when you type anything then that much time function is called. So I think its the case of function re-calling wihile each character we typed in event delegation.
Sir very nice , video very simple, clear and directly getting into our head Sir also make real time video of securing API , and make webpage loading g faster in UI
!! Its so easy to learn from your @video Thanks lot for such great video !!! , Please cover one fronted template with javscript, Jquery if possible with AJAX, animation or only with Javascript with animation
Thanks very much akshay. Yours videos are very helpful and quite descriptive and understandable. Can you please make one video on webpage security. I mean from a frontend developer point of view how can I add security to a web app. Thanks in advance
I don't know exactly about it. React router is all together a giant concept, won't be this simple. But yeah this concept is often used for setting behaviour patters in the code :)
So in the frameworks like angular where we can loop through the list and attach an event listner on each item does attach a separate event for it or it takes care of delegation internally?
You will get it through the event object. As discussed by Akshay, using event delegation attach a single event listener and the event object will contain the element id that is being clicked.
Hahaha, that's my system saying it's 21 hours. I've turned on the speaking clock. I was actually shooting the video at 09:00 PM. Forgot to trim that portion, nice catch. 😅
Excellent Explanation Akshay, I have a minor doubt - as you have said it we can only do event delegation because of event bubbling, but while playing with the code, when i set the useCapture flag to true, it was working perfectly fine too, can you explain this behaviour?
Benefits of event delegation:
1) improves memory space
2) mitigates risk of performance bottle neck
3) Dom manipulation
4) when elements get added dynamically, the process of adding events is slow
Limitations:
1) All the events are not bubbled up, some events like blur, focus are not bubbled up
2) if e.stopPropogation is used in child, then events are not bubbled up
Eventually found someone who really knows something and shares it on youtube :D
Haha so true
I have been adding listeners on loop like an idiot when I could have just done this...
This was enlightening to a great degree.
Your are even adding a loop but I have been adding a event listener each and every time for every element
i know im randomly asking but does someone know of a trick to log back into an instagram account?
I stupidly forgot my password. I would appreciate any tricks you can give me!
I have been terrified of frontend questions in fullstack positions but your videos have given me so much clarity and insight into the working of JS. Thanks a lot Akshay.
Benefits of event delegation.
1.Less memory usage.
2.Mitigates risk of performance bottleneck.
3.Instead of writing multiple event listener task can be done in single event listener so writing less code is also a benefit
4.When elements are dynamically added ,so adding events to the element is slow so event delegation eventually takes care of it.
Limitation
1.Not all events support event delegation.
2.If stoppropogation is used on child elements eventually event delegation would not work.
You are absolutely right !! it opened my eyes when I actually understood this concept :)
No tutorial/ video ever explained delegation this way. Can't thank more Akshay.
God bless you.
Dude! I love you . These videos are really helpful for self taught devs.
These videos are really helpful for self-taught devs.
after namaste javascript, this frontend interview question playlist had helped me a lot. I can apply this things in my work as well as ace my interviews.
All thanks to YOU, sir
Never knew data attributes could be used this way. Amazing !
Thanks, Akshay for this perfect explanation...
Also,
Being a full-stack developer and like me, a lot many FS devs keep ignoring CSS because it needs a proper understanding of not just the target element as well as the effects passed on from parents in the hierarchy. Overall, CSS being a secondary skill for this reason as well, it's not focused much in tech Interviews. But, I feel it is much-required skills to deliver a quality products. If you've cracked CSS properties' relations with its parents in the hierarchy, I'm sure huge junta including me would like to learn it from you!...
No joke, you are the best person when it comes to explaining. I really recommend you Akshay! Keep it up!
Hi sir, after 1 year learning you lesson me a practical and real things, Thanks for advise and teach.
Thanks Akshay for awesome explanation of each topic. I have gone through your event bubbling and capturing video before this one. I think your first example regarding categories is the best example of enabling event capturing. Since we are attaching event handlers to parent - instead of events bubbling from child to parent, we can enable useCapture property and can stop delegation to child elements for better performance using e.stopPropagation().
but how we will understand from where the event actually occurred if the target is the child element
best javascript knowledge. I was looking at this kind of depth of knowledge in javascript.
You are great !!!!!!?
Helping so many poor people
This guy is awesome. Love from Bangladesh.
In CSS, we use as event delegation mean, we assign our base tag's href for all tags in that page. This is just analogy for those who know but not Event Delegation. 😕
Good Quality and informative video.I kept all the concepts in my mind for interview.Thanks so much.
Really useful information and very well explained lectures. One of the best channel to prepare for front end interviews. Thank you so much for creating this channel.
best series so far
Very beautiful concept, and beautifully taught by Akshay sir.
hooked to your tutorials, really good quality in teaching and content.
Amazing examples, very very easy to learn
Good job Akshay..its amazing how you present the concepts precisely.Keep up the good work!!
Thank you for making these free videos.They are so educational.keep up the good work.
Akshay,Thank you so much these videos. You explanation is pretty clear. Thanks again.
Hats off, awesome teaching skills.
Hi Akshay, thanks for bringing such insights logics. Keep post such videos..
Thanks Dude..Helped me to learn events in javascript in depth..
Love you man. Thanks for your time and knowledge.
nice video and simple understandable English. Very useful for me
Amazing stuff, great way of teaching :)
Thanks Akshay , you explained very nicely . :)
such a nice video with great explaination...Thank you so much
older videos are one level good than newer ones😋
This was amazing. Thanks for making it so simple.
Awesome explanation man.. kudos
Nice one! also got to know how frameworks make use of custom attributes like data-dismiss="modal" in bootstrap. Thanks!
You're absolutely right Souvik and the people who write frameworks are just like us, it's just that they understand these core concepts very well and how things work under the hood. Keep on learning these basic concepts and slowly everything will make sense and you will get a lot more wow moments. :)
@@akshaymarch7 ab to aajao sir
It was just fantastic.Thank you so much brother
can u make a video about how javascript engine works.thanks in advance
awesome video .. very informative .. please make more videos
bro learning a lot from your videos. Please please please upload more videos on Javascript. Also if possible discuss on tricky CSS, HTML questions.
Very nice and precise tutorial with great examples. Requesting you to make a video on "Event Loop". :)
Excellent examples and explinations👍
I just only sy kitna awesome parhata ha yar
Amazing video, learnt a lot✌️ thank you Akshay 👍
thank you brother for making it very clear!
Thanks!
Thank you for supporting the channel. ❤️
excellent video, thank you Akshay
Your explanation is too good, can you make a video on java script timers please
Video is very helpful
grateful to you
Wonderful explanation !!
This was nicely explained. Keep up the good work. :)
second example when you type anything then that much time function is called. So I think its the case of function re-calling wihile each character we typed in event delegation.
Really useful examples.
Sir very nice , video very simple, clear and directly getting into our head
Sir also make real time video of securing API , and make webpage loading g faster in UI
Awesome video once again!
Very helpfull sir
This video should get more likes
amazing amazing amazing!!!!
@Akshay Saini
Your videos are very insightful. Please do one video on Infinite Scroll and Pagination.
Thanks for your valuable explaination.
now i'm bit confuse between event bubbling and event deligation.
!! Its so easy to learn from your @video Thanks lot for such great video !!! ,
Please cover one fronted template with javscript, Jquery if possible with AJAX, animation
or only with Javascript with animation
Thanks for information sharing
It's awesome. Thanks
Thanks very much akshay. Yours videos are very helpful and quite descriptive and understandable. Can you please make one video on webpage security. I mean from a frontend developer point of view how can I add security to a web app. Thanks in advance
Excellent!
WOW So cool! Awesome explanations!
In event delegation we would have to write a lot of if and else condition to handle different click events
Finally I got it!!. is this the same way how react-router work? i mean like not exactly the same but core concepts are this only right?
I don't know exactly about it. React router is all together a giant concept, won't be this simple. But yeah this concept is often used for setting behaviour patters in the code :)
Awsome Akshay..... Make video on "Event Loop"
Awesome brother
Very Informational
Thank you so much sir 😀🙏
Thx more knowledge video but Request video Virtual DOM and Actual DOM
Superb, thanks.
Great!
So I am not the only person who is reminded of the time by them machines
document.getElementById is faster than document.queryselector , so use the first one.
You are awesome!
Please make video on closures in JavaScript
Dude your videos are awesome and useful.. Can you please make video on angular?
I m digging your videos 😁
Jasoos 🕵️
@@akshaymarch7 Finally got response from you😁
Digging is in progress till find the gem of javascript.
Thanku so much for you efforts 🙏
we can also do event delegation with capturing phase.
So in the frameworks like angular where we can loop through the list and attach an event listner on each item does attach a separate event for it or it takes care of delegation internally?
please make more videos on these type of things
Superb
let's if we have list item with nested element. eg: item . then how we will figure out and get the id if user clicked on span or etc.
You will get it through the event object. As discussed by Akshay, using event delegation attach a single event listener and the event object will contain the element id that is being clicked.
@Jaisa Ram, you found any solution for this? I am stuck in the same situation
thanks for totorial.....
At 8:50 , 21 hours of what??
Hahaha, that's my system saying it's 21 hours. I've turned on the speaking clock. I was actually shooting the video at 09:00 PM. Forgot to trim that portion, nice catch. 😅
It happened in another video as well😅
Great
Excellent Explanation Akshay, I have a minor doubt - as you have said it we can only do event delegation because of event bubbling, but while playing with the code, when i set the useCapture flag to true, it was working perfectly fine too, can you explain this behaviour?
@akshay
Can you please show in a video how can we achieve event delegation in react components
Awesome explanations of topic with elegant code examples. Can u plz cover throttling and debouncing too in your next video ?
Hi Manish, I've already covered debouncing in a video. Please have a look at the playlist :)
Nice!
what about onChange Event will it work the same way as working for onClick?
where does the bubbling stop up in the hierarchy?
Root
Super
Hi Akshay, event delegation can't be used when if we need to send some additional information also on clicking every li item.. right ?