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.
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.
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.
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!...
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 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.
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 :)
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
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
!! 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
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?
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. 😅
![Local Storage & Session Storage [ with Code Examples ]](http://i.ytimg.com/vi/MOd5cTJ6kaA/mqdefault.jpg)
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.
Dude! I love you . These videos are really helpful for self taught devs.
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.
Thanks!
Thank you for supporting the channel. ❤️
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.
These videos are really helpful for self-taught devs.
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!...
Hi sir, after 1 year learning you lesson me a practical and real things, Thanks for advise and teach.
No joke, you are the best person when it comes to explaining. I really recommend you Akshay! Keep it up!
Never knew data attributes could be used this way. Amazing !
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 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
You are great !!!!!!?
Helping so many poor people
best javascript knowledge. I was looking at this kind of depth of knowledge in javascript.
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. 😕
best series so far
This guy is awesome. Love from Bangladesh.
hooked to your tutorials, really good quality in teaching and content.
Good Quality and informative video.I kept all the concepts in my mind for interview.Thanks so much.
Good job Akshay..its amazing how you present the concepts precisely.Keep up the good work!!
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.
Amazing examples, very very easy to learn
Very beautiful concept, and beautifully taught by Akshay sir.
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.
Love you man. Thanks for your time and knowledge.
Hats off, awesome teaching skills.
Hi Akshay, thanks for bringing such insights logics. Keep post such videos..
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
Excellent examples and explinations👍
Thanks Dude..Helped me to learn events in javascript in depth..
Amazing video, learnt a lot✌️ thank you Akshay 👍
Very helpfull sir
Thanks Akshay , you explained very nicely . :)
Amazing stuff, great way of teaching :)
Awesome explanation man.. kudos
Thanks for information sharing
Really useful examples.
older videos are one level good than newer ones😋
thank you brother for making it very clear!
Video is very helpful
grateful to you
excellent video, thank you Akshay
This was amazing. Thanks for making it so simple.
Wonderful explanation !!
nice video and simple understandable English. Very useful for me
such a nice video with great explaination...Thank you so much
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
I just only sy kitna awesome parhata ha yar
Thank you so much sir 😀🙏
Your explanation is too good, can you make a video on java script timers please
Very nice and precise tutorial with great examples. Requesting you to make a video on "Event Loop". :)
amazing amazing amazing!!!!
It's awesome. Thanks
thanks for totorial.....
Excellent!
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 Informational
Awesome video once again!
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.
This video should get more likes
Awesome brother
This was nicely explained. Keep up the good work. :)
@Akshay Saini
Your videos are very insightful. Please do one video on Infinite Scroll and Pagination.
Great!
Thanks for your valuable explaination.
now i'm bit confuse between event bubbling and event deligation.
You are awesome!
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 :)
Thank you
Superb
Superb, thanks.
Super
Great
Please make video on closures in JavaScript
In event delegation we would have to write a lot of if and else condition to handle different click events
Got this too.
Dude your videos are awesome and useful.. Can you please make video on angular?
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
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
Thanks
Awsome Akshay..... Make video on "Event Loop"
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 🙏
Why "e.target.id" is not getting printed in the console, at 15:15 and at 17:01..…...? Anyone please reply
!! 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
❤❤❤
please make more videos on these type of things
we can also do event delegation with capturing phase.
So I am not the only person who is reminded of the time by them machines
Thx more knowledge video but Request video Virtual DOM and Actual DOM
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?
Perfect
Nice!
document.getElementById is faster than document.queryselector , so use the first one.
thankyou
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😅
@akshay
Can you please show in a video how can we achieve event delegation in react components