JavaScript DOM Tutorial #10 - Event Bubbling

Yo gang, in this JavaScript DOM tutorial I'll explain the concept of event bubbing, and how we can use it to our advantage when setting up event listeners.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

[NoahNobody]

I never understood what people meant by event bubbling until I heard that explanation.

[bartoszsowa]

I've been watching your tutorials for about 1, 5 year now but still i'm regularly getting impressed by how clearly you explain concepts

[LucasofAppalachia]

Your tutorials are absolutely amazing mate! Very clear and easy to understand. JavaScript has been my Achilles Heel for the last year, but thanks to your tutorials it's becoming much clearer.

[patrickc.]

I love this! Such a smart way of adding event listeners!

[MdR]

Just learned about event bubbling but couldn't really wrap my head around it yet ;D
Thank you for this clear explanation!

[Piano_Albert]

I'm really liking this series so far. So clear! You make it seem so simple :) should have done this earlier!

[dunkTheFunk]

Thanks, we live in great times. Your tutorials are priceless.

[superyoyo]

I was struggling to understand parentNodes, childNodes, etc...consequently, event bubbling..but you made it so simple to understand, thanks

[rongliao]

Wow! Very good tutorial in explaining often confusing or intimidating topic! Thanks a lot!

[fvvfwop]

every time i watch one of your tutorials i add many experiences to my knowledge, please keep to add more value videos

[juangrandoso]

WebAssembly? Please, it would be awesome if someone like you explains it

[axelcarvalho]

Great. I learned about it but till now didn't know why it's used.

[pastuh]

Very well explained. Actualy i had problem and was thinking.. why it not works..

[Meyaleleth]

Thank you!!! The only explanation I fully understood.

[jfiejka]

Hey man,
I believe in that case you can just simply use remove() method without grabing parent node. Correct me if I'm wrong :)

P.S. I really love your channel, keep up good work sir!

[Gruximillian]

Hi Shaun, another great playlist! I would suggest to keep li.parentNode.removeChild(li) since that way the event handling function can be reused on some other elements without the need to change variable 'list' inside the function, or at least to better decouple it from the variables outside its scope, a situation that I often encountered in my experience.

[MegaLearningStuff]

This worked for me,
const list = ul')
list.addEventListener('click', function(e)
{

{
const li = e.target.parentElement;

}
});

[QuanNguyen-ogpq]

what's the theme you were using in Atom?

[saulblancotejero]

You can use 'this' inside the event to use the list as well, right?

[yadusolparterre]

"What is event bubbling? In basic terms it's the bubbling of events"
Wow, so clear now.