Event Delegation in Javascript | UI/Frontend Interview Question
HTML-код
- Опубликовано: 1 окт 2024
- - What is Event Delegation?
- A quick demo and examples of this techniques
- Benefits of Event Delegation?
- Limitations of Event Delegation?
Link to code of Example 1 - codepen.io/aks...
Link to code of Example 2 - codepen.io/aks...
If you get to learn something from this video then do give it a thumbs up and subscribe to my channel for more such videos.
If you want me to cover any specific topic, then comment down below. I would be happy to help you.
If you find my videos helpful,
then please support this channel by buying a coffee,
www.buymeacoff...
Cheers,
Akshay Saini
akshaysaini.in
Would love to Stay Connected with you ❤️
LinkedIn - / akshaymarch7
Instagram - / akshaymarch7
Twitter - / akshaymarch7
Facebook - / akshaymarch7
#Javascript #JavascriptInterviewQuestions #AkshaySaini
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!
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
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.
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!...
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.
Hi Akshay, why we are using if(e.target.tagName == "LI") that is not clear to me ? please Reply
Hi Akshay Bhaiya,
I have one doubt about how we can say that we are using event bubbling here, not event capturing.
P.S. I have already watched event bubbling and event capturing videos.
Never knew data attributes could be used this way. Amazing !
Thx more knowledge video but Request video Virtual DOM and Actual DOM
These videos are really helpful for self-taught devs.
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
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 :)
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. 😕
So I am not the only person who is reminded of the time by them machines
No joke, you are the best person when it comes to explaining. I really recommend you Akshay! Keep it up!
Please make video on closures in JavaScript
Your explanation is too good, can you make a video on java script timers please
Hi Akshay, thanks for bringing such insights logics. Keep post such videos..
where does the bubbling stop up in the hierarchy?
Root
Hi sir, after 1 year learning you lesson me a practical and real things, Thanks for advise and teach.
In event delegation we would have to write a lot of if and else condition to handle different click events
Thanks Akshay , you explained very nicely . :)
Hats off, awesome teaching skills.
Good job Akshay..its amazing how you present the concepts precisely.Keep up the good work!!
You are great !!!!!!?
Helping so many poor people
Good Quality and informative video.I kept all the concepts in my mind for interview.Thanks so much.
And for the last example, we can merge it with "denounce" so that the event only triggers once the user stop typing... 😀
You explained this very well... Thanks!!
Nope. Debounce on input field validation is a very bad idea.
You need to notify the user as soon as he types something against the rules, instead of letting him know after he's finished typing a long sequence of mistakes. That is bad user experience.
Very nice and precise tutorial with great examples. Requesting you to make a video on "Event Loop". :)
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😅
Love you man. Thanks for your time and knowledge.
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
we can also do event delegation with capturing phase.
Very beautiful concept, and beautifully taught by Akshay sir.
Akshay do we need this in react as well or not ?
Akshay, You literally wear this same t shirt for every video. Is this Uber t shirt or you are into personal branding???
Thanks for your valuable explaination.
now i'm bit confuse between event bubbling and event deligation.
Amazing stuff, great way of teaching :)
Super
Akshay,Thank you so much these videos. You explanation is pretty clear. Thanks again.
!! 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
best series so far
@Akshay Saini
Your videos are very insightful. Please do one video on Infinite Scroll and Pagination.
Hello brother please make a video on why arrow functions don't bind this??
document.getElementById is faster than document.queryselector , so use the first one.
best javascript knowledge. I was looking at this kind of depth of knowledge in javascript.
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
Awesome explanation man.. kudos
what about onChange Event will it work the same way as working for onClick?
Hi why console.log( 0 && 'hi') returns 0 ? can any have any idea?
expr1 && expr2
logical && operator returns expr2 if expr1 evalutes to true; else returns expr1
0&& 'hi' here 0 evaluates to false so returns 0
@@jojogeorgeyoutube Thank you!
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.
apparently his videos can be watched in 1.5x
nice video and simple understandable English. Very useful for me
Sir can you make video on why DOM operation are expensive as compared to React virtual DOM. need detaisl on why it is expensive cant find any proper content on why its slow
Noted. Will try to come up with that soon. 😇👍
@@akshaymarch7 Thankyou :)
In our regular dom if we make any change on UI it will affect on all other parts of our UI this way our operation speed become slow.
But in react virtual dom only change/re-render happens when a component has been change and that component only gets rerender not all other components.
Internally react is fast but still we need take care of rerendering
amazing amazing amazing!!!!
Hi Akshay, event delegation can't be used when if we need to send some additional information also on clicking every li item.. right ?
This guy is awesome. Love from Bangladesh.
Thank you so much sir 😀🙏
thanks for totorial.....
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
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
bro learning a lot from your videos. Please please please upload more videos on Javascript. Also if possible discuss on tricky CSS, HTML questions.
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 brother
Does document.querySelector('#form input').addEventListener('keyup', filterElementsAndDoStuff) add separate event listeners for each input? Is this any better than adding separate listeners like document.querySelector('#form #input1').addEventListener('keyup', doStuff), document.querySelector('#form #input2').addEventListener('keyup', doStuff) and so on?
It is way better than adding separate event listeners to every form element. Using event bubbling whenever a child element event is triggered it bubbles up to parent which then handles the logic.
Bhai aap ek course banao web development pe plzz
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?
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
❤❤❤
thank you brother for making it very clear!
excellent video, thank you Akshay
if(e.target.dataset && e.target.dataset.uppercase) alert(e.target.dataset.uppercase);
thanks
Amazing video, learnt a lot✌️ thank you Akshay 👍
Thanks Dude..Helped me to learn events in javascript in depth..
thankyou
Great!
can u please create a complete playlist of javascript.
awesome video .. very informative .. please make more videos
Thanks
Superb
nice
Got this too.
Great
Dude your videos are awesome and useful.. Can you please make video on angular?
Sir i try it but it doesn't not work give me type error of is not a function
This was nicely explained. Keep up the good work. :)
It's awesome. Thanks
I just only sy kitna awesome parhata ha yar
Video is very helpful
grateful to you
hooked to your tutorials, really good quality in teaching and content.
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.
Awesome video once again!
Hi.
Can you make video on accessing elements in a shadow root?
Thank you for making these free videos.They are so educational.keep up the good work.