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:
+ Atom editor - atom.io/a
+ GitHub Repo - github.com/iamshaunjp/JavaScr...
---------------------------------------------------------------------------------------------
Other tutorials:
----- JAVASCRIPT FOR BEGINNERS:
• JavaScript Tutorials f...
----- CSS FOR BEGINNERS:
• CSS Tutorials For Begi...
----- NODE.JS TUTORIALS
• Node JS Tutorial for B...
----- SUBSCRIBE TO CHANNEL - / @netninja
============== The Net Ninja =====================
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
================== Social Links ==================
Twitter - @TheNetNinja - / thenetninjauk

[@NoahNobody]

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

[@bartoszsowa5140]

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

[@NetNinja]

Thanks Bartosz!

[@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.6183]

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

[@MdR1328]

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

[@dunkTheFunk]

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

[@user-fv3vf5wo9p]

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

[@Piano_Albert]

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

[@NetNinja]

Thanks Albert, glad you’re liking it 😊

[@rongliao9255]

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

[@NetNinja]

Thanks Rong 😊

[@Meyaleleth]

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

[@superyoyo486]

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

[@axelcarvalho2661]

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

[@AzwadAbid]

Very helpful tutorial. Thanks bro.

[@mwala94]

Great video as always! :)

[@DeViLTh0rn]

Thank you. A newbie guy from 🇲🇾...

ur born to teach this !

[@juangrandoso6950]

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

[@shanebenlolo4866]

made perfect sense thanks so much!

[@pastuh]

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

[@boboboboboboo7522]

very good explanation

[@anthonyhaddad5630]

u rock mate!

[@edgarhernandez-kl2ci]

Good explanation

[@mohammadshayegh7763]

OMG!!!! AMAZING

[@saulblancotejero8298]

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

[@kshitijbaria732]

thanks sensei

[@QuanNguyen-og6pq]

what's the theme you were using in Atom?

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

[@MouradBougarne]

You are right, if he use : e.target.parentElement.remove(); But the purpose of the course is to show how to traversing through the DOM.

[@aqhumza]

Wrong, it should be like this: e.target.parentElement.parentElement.remove();

[@btm1]

it's because remove() is not supported in older/some browsers

[@nikkoalminar7924]

Is .target a method?

[@kimdh377]

where could I find the skill at 2:46 when you set your mouse on the line, then it becomes purple color? I really need that skill TT

[@simple8810]

simple css on hover it border color will be colored

[@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.

[@davideugene7911]

Merci :)

[@MrRSharma07]

Can anyone explain me how that ' e ' Argument of function is working , i mean from where it's getting value ? I am beginner , sorry for stupid question

[@chethankambi31]

addEventListener(), takes 2 arguments - one is the event(activity) that took place which in this case is the 'click' ('click' is defined as one of the events, for a complete list refer mozilla documentation) and the second argument is a callback function that can do something on the event that just took place. Hope this helps!

[@yadusolparterre]

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

[@karthikalluri8188]

do u have the code for that webpage

[@mahsam7975]

hi, i dont get the 2:57 ! why if we add another li manually the first code snippet dont run for it? i watched many times and i still dont get it he says because we lready associated event to those .delete buttons but also the new list item can act like others ! help please

[@BookOfSaints]

This is because, initially, you are cycling through all the *existing* li elements in the book list and adding an event listener to each one. When you add a new li element, it does not have an event listener added to it. The way the second approach works is adding a click listener to the entire ul element, containing all the li elements. When you click anywhere in the in the ul, the event will fire, then check to see if the click event happened on one of the delete buttons. If so, it will remove the li that corresponds to that delete button.

[@samaneh77]

yes, even if we add a new button the way he did, because that button also has the .delete class it should be selected in the forEach loop and get an eventListener; I also did not get why he said it will not have the event listnere...

[@flamingobird8513]

Same here! Can anyone explain it? Thank you

[@Toulkun]

@@BookOfSaints So forEach works only for already existing elements. Would it work with for loop if we set condition to be less than li's length?

[@partoftheabsoluteone4960]

I agree on this point. I am still not clear on this, even after reading the explanation below about 'existing' li elements. Why does the forEach() loop not see or pick up the new li element when we refresh and run the code again? It still has a class name of 'delete'

[@guitar602991]

Hello, would this be a much more expensive way to delete the item? var listItems = document.getElementsByTagName("li"); for (var i = 0; i < listItems.length; i++) { listItems[i].onclick = function() {this.parentNode.removeChild(this);} }

[@chethankambi31]

Yes, because you will be looping every time an event occurs!

[@MegaLearningStuff]

This worked for me, const list = document.querySelector('#book-list ul') list.addEventListener('click',function(e) { if(e.target.matches('.delete')) { const li = e.target.parentElement; li.parentNode.removeChild(li); } });

[@MegaLearningStuff]

the code in here in fourth line if(e.target.className == 'delete') { } was not working for me.

[@faithfuledema8645]

Very helpful

[@hachij_]

bubbling :)

[@The5starSTUNNNA]

Please MEAN stack

[@pikachu5223]

MERN BETTER FOR ME :)

[@CastleShield]

❄️

[@kalamashaka8280]

I HAVE INCLUDED BREAK DOWN AND EXPLANATION OF THIS EXAMPLE : HOPE IT HELPS SOMEONE 'use strict' //STEP : 1 //so our task is to fire an click event on all buttons so that when the button is clicked the whole li is deleted //first thing below is to get all the li elements //below i have gotten and put all my buttons under deleteBtn variable let deleteBtn = document.querySelectorAll('#book-list .delete'); //buttons gotten //STEP : 2 //From the group of buttons elements we got, we can now apply or fire the event to a single button element or button // so below we convert the nodelist or html collection into an array and sork on a single button Array.from(deleteBtn).forEach(function(button){ //STEP : 3 //for every single button we click let us apply an event to that particularly clicked button button.addEventListener('click', function(e){ //get the event to work on the item that was selected in our case li //once the button is clicked then we want all the entire li element to be the target of the event //STEP : 4 const li = e.target.parentElement; //STEP : 5 //below we call the action that we want the event to perform on the single element //now call the parent of the button and remove the particular childelement selected in our case the entire li li.parentNode.removeChild(li); }); });

[@k4qdex]

this hardly explains bubbling...