Event Delegation in Javascript | UI/Frontend Interview Question

- 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

[@Abhishek-dp5tc]

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

[@cnsnmms3708]

Eventually found someone who really knows something and shares it on youtube :D

[@abhishekhsharma677]

Haha so true

[@shadestorm3995]

I have been adding listeners on loop like an idiot when I could have just done this...
This was enlightening to a great degree.

[@mridulkumar4087]

Your are even adding a loop but I have been adding a event listener each and every time for every element

[@jamesonvincent3779]

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!

[@BaishaliGhosh13]

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.

[@user-uh3zr7mo4i]

Dude! I love you . These videos are really helpful for self taught devs.

[@hardikluhar4738]

These videos are really helpful for self-taught devs.

[@shishirsonekar5661]

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!...

[@sowmithreddy18]

Never knew data attributes could be used this way. Amazing !

[@saritajha1]

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.

[@priyaranjan1733]

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. 😕

[@utpalclicks]

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!!

[@aadispare3673]

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.

[@ShouvikMitraPlus]

Nice one! also got to know how frameworks make use of custom attributes like data-dismiss="modal" in bootstrap. Thanks!

[@akshaymarch7]

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. :)

[@Abhishek-do8mp]

@@akshaymarch7 ab to aajao sir

[@vandanachintala8326]

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().

[@kirankamath5891]

but how we will understand from where the event actually occurred if the target is the child element

[@rameshbankuru421]

Akshay Saini, Dude! I love you. These videos are really helpful for me

[@subhamshaw1726]

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

[@onlynaveen]

Hi sir, after 1 year learning you lesson me a practical and real things, Thanks for advise and teach.

[@ryansantiago3684]

No joke, you are the best person when it comes to explaining. I really recommend you Akshay! Keep it up!

[@lovishgoel2745]

best series so far

[@prabu2778]

You are great !!!!!!?
Helping so many poor people

[@iqrarhussain7136]

Very beautiful concept, and beautifully taught by Akshay sir.

[@shoaib_akhtar_1729]

Hats off, awesome teaching skills.

[@gyanendraverma3155]

best javascript knowledge. I was looking at this kind of depth of knowledge in javascript.

[@md.mohiulislam6516]

This guy is awesome. Love from Bangladesh.

[@charanckck]

Love you man. Thanks for your time and knowledge.

[@codingwithgraceandtruth2456]

hooked to your tutorials, really good quality in teaching and content.

[@samdatta9163]

Good Quality and informative video.I kept all the concepts in my mind for interview.Thanks so much.

[@tusharkrishna8149]

Your explanation is too good, can you make a video on java script timers please

[@MrMaulikthaker]

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.

[@ishusharma415]

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.

[@SAIRAM-ct5cy]

Good job Akshay..its amazing how you present the concepts precisely.Keep up the good work!!

[@gokulsrinivasan8563]

Akshay,Thank you so much these videos. You explanation is pretty clear. Thanks again.

[@SauravKhare]

Really useful examples.

[@chamnil8666]

Thank you for making these free videos.They are so educational.keep up the good work.

[@kiranmahajan778]

In event delegation we would have to write a lot of if and else condition to handle different click events

[@PeaceUrSoul]

Hi Akshay, thanks for bringing such insights logics. Keep post such videos..

[@AdnanAli-cp9hk]

amazing amazing amazing!!!!

[@VinayVerma22]

Very nice and precise tutorial with great examples. Requesting you to make a video on "Event Loop". :)

[@suthagarthambikannu6402]

nice video and simple understandable English. Very useful for me

[@mohann7750]

Thanks Dude..Helped me to learn events in javascript in depth..

[@snehashischattopadhyay9519]

bro learning a lot from your videos. Please please please upload more videos on Javascript. Also if possible discuss on tricky CSS, HTML questions.

[@anandyadav_]

older videos are one level good than newer ones😋

[@navdeepsr93]

Thanks Akshay , you explained very nicely . :)

[@shivGGG]

Amazing stuff, great way of teaching :)

[@creativemind4116]

Thanks for your valuable explaination.
now i'm bit confuse between event bubbling and event deligation.

[@abhilayman8533]

document.getElementById is faster than document.queryselector , so use the first one.

[@dhrumit7]

@Akshay Saini
Your videos are very insightful. Please do one video on Infinite Scroll and Pagination.

[@manojkumarsaheng]

Thx more knowledge video but Request video Virtual DOM and Actual DOM

[@himanshushekhar3694]

such a nice video with great explaination...Thank you so much

[@dinesh9896]

thank you brother for making it very clear!

[@videosforinventionimaginat2410]

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

[@Siddarthathota]

Awesome explanation man.. kudos

[@pritamchowdhury4191]

It was just fantastic.Thank you so much brother

[@pritamchowdhury4191]

can u make a video about how javascript engine works.thanks in advance

[@sagarkumar4816]

awesome video .. very informative .. please make more videos

[@TanayBhalani]

Amazing video, learnt a lot✌️ thank you Akshay 👍

[@hundredeyes7759]

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?

[@akshaymarch7]

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 :)

[@priyankachhabria6769]

This was amazing. Thanks for making it so simple.

[@MujahidAli-gi6jk]

I just only sy kitna awesome parhata ha yar

[@jayanthbabusomineni557]

Please make video on closures in JavaScript

[@samadhansalgar9181]

!! 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

[@iaindudman3349]

Excellent examples and explinations👍

[@sandeepadiyar001]

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

[@profjs2398]

excellent video, thank you Akshay

[@mohitkushwaha8156]

Video is very helpful
grateful to you

[@musicsubhankar]

This was nicely explained. Keep up the good work. :)

[@techbjunks]

we can also do event delegation with capturing phase.

[@Priyanka_12321]

Thank you so much sir 😀🙏

[@sumonbarai178]

thanks for totorial.....

[@namankeshari7332]

Awesome video once again!

[@jayanthbondi4251]

Wonderful explanation !!

[@MunshiWahid]

This video should get more likes

[@Rajavinoth1981]

Super

[@TheRichEng]

Awesome brother

[@DharmendraKumar-qk5bt]

It's awesome. Thanks

[@kalyanparri8517]

Thanks for information sharing

[@12vvs]

Great!

[@simranbhatia2402]

Superb

[@sahilsatishkumar]

So I am not the only person who is reminded of the time by them machines

[@valurathod8579]

Dude your videos are awesome and useful.. Can you please make video on angular?

[@vitalvisions4U]

Got this too.

[@manishchandra8931]

Awesome explanations of topic with elegant code examples. Can u plz cover throttling and debouncing too in your next video ?

[@akshaymarch7]

Hi Manish, I've already covered debouncing in a video. Please have a look at the playlist :)

[@aburaihan-py4vi]

Excellent!

[@anonymousshooter3636]

Very Informational

[@velmurugan.personel]

Awsome Akshay..... Make video on "Event Loop"

[@somhrikkonar6147]

Thanks

[@karensanchez7308]

Superb, thanks.

[@SHIVAMPANDEYSJTG]

You are awesome!

[@bahaakrayem4104]

Great

[@AbhishekGupta-bg8wt]

please make more videos on these type of things

[@shubamdadhwal3497]

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?

[@leolowe22]

where does the bubbling stop up in the hierarchy?

[@AkshaySaini]

Root

[@jaisaram5239]

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.

[@snehashischattopadhyay9519]

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.

[@harshithm1739]

@Jaisa Ram, you found any solution for this? I am stuck in the same situation

[@senaitmekonnen692]

thankyou

[@sunilthind3257]

@akshay
Can you please show in a video how can we achieve event delegation in react components

[@surabhipal9553]

Thank you

[@techguybiswa]

WOW So cool! Awesome explanations!

[@nemilidinneanusha1747]

Thanks!

[@akshaymarch7]

Thank you for supporting the channel. ❤️

[@sanauwari]

I m digging your videos 😁

[@akshaymarch7]

Jasoos 🕵️

[@sanauwari]

@@akshaymarch7 Finally got response from you😁
Digging is in progress till find the gem of javascript.
Thanku so much for you efforts 🙏

[@ashwanipayal8658]

Nice!

[@aditisharma2552]

This is fab