JavaScript Event Bubbling and Propagation
Vložit
- čas přidán 7. 09. 2024
- What is event bubbling in JavaScript?
What is the difference between the bubbling and the capture phase for events?
How to you stop events from bubbling?
How to control multiple listeners on the same object.
Code GIST: gist.github.co...
ES6 Arrow Functions video: • ES6 JavaScript Arrow F...
JavaScript Event Listeners video: • Introduction to JavaSc...
JavaScript Escape Sequences video: • JavaScript Unicode Cha...
One of the most beautiful and complete real javascript tutorials! Thank so much for this great content!
Yes please keep going deeper in js beauvoir.
man you are great. i watched 4 videos on some other subjects on javascript. you are an excellent teacher. you know how to explain
awesome explanation!!! just to mention that there is no need for the reset function, the easiest way in my opinion is to do it like this:
let highlight = e => {
e.stopPropagation();
let target = e.currentTarget;
target.className = 'gold';
setTimeout(()=> {
target.className = "";
}, 2000);
}
In my opinion best explained. I finally get it! Thank you.
Awesome vid! Really made bubbling clear to me -- taking notes on this. Thanks Steve!
Thank you for your great tutorial :D. However, I'm still a bit confused about the direction the bubbling goes. You said the bubbling went from the most nested (the span in this case) to the paragraph, the div, and so on, which means it went from the "inside" to the "outside". So when you added the eventListener to the div, I automatically assumed that the bubbling would go from the div to the "outer" elements, while the "inner" elements (paragraph, span) would stay unaffected. But this was not what happened in the video. I would love to know what I got wrong here
If you look at the source html file - bubbling means it goes from the element that triggered the listener to the top of the page. Capture means it starts at the top of the page and moves towards the triggering element. But it only passes through elements that are ancestors of the triggering element
Very good video man, seriously great video the explanation was very concise and neat.
This is some good stuff.
Thank you for the great content! I just noticed that since JS is synchronous! if we change the order of the addEvenentListeners then the highlight will still valid but any listener comes after the point where we have the stopImmediatePropagation will not be valid.
Man your tooo good. the best tutor
Thank you Mr. Steve
You are amazing!
Bit of a question for anyone that might be able to advise... can you use the bubbling phase to get an element that matches a certain criteria (e.g. id) and store it in a variable? Just for info the element I am referring to isn't the event target and it isn't the element with the event listener on it. This would be an element in between the two which is included in the bubbling phase.
Hello Steve Griffith! can you tell me. why you are using
let highlight = (ev)=>{}
instead of
function highlight(ev){}
is this is just a writing preference or there is some benefit
I use different styles in different tutorials just so my students see lots of different approaches.
There is no benefit really of one over the other. Just minor differences in how the code is handled internally with hoisting and the keyword this.
Dear Mr.Steve please elaborate the fact when use capture set into boolean true like x.addEventListener('click',callback function, true) ....by default the boolean set false... then how capture phase executing internally?? Thank You.
It is an option for exceptional circumstances. Most likely involving multiple overlapping listeners. If you need it you will know why. I have never needed to use it.
Amazing tutorial Steve - You packaged a lot of stuff inside 13 min. Can you give the CSS code within the style element. I am not able to get the border/ spacing / color of span, div, para and main properly.
Also what is diffference b/w stopPropagation and stopImmediatePropagation
I don't have the CSS from this it was six years ago. It was just padding, border, and background colour, with the .gold class being added to change the background colour.
stopPropagation stops the event moving to the next level up in the DOM tree. Eg: span -> p or p -> div.
stopImmediatePropagation will stop the event moving to another event listener for the same type on the same object. eg:
p.addEventListener('click', func1);
p.addEventListener('click', func2);
p.addEventListener('click', func3);
All three listeners added to the same DOM element. All three listening for the same type of event.
If func1 uses ev.stopImmediatePropagation then func2 and func3 will not run.
My inspiration and aspiration, Thank you.
Thank U ! Love Frm. INDIA .
thx u very much steve
Let's see if I understand this correctly. In your function: let highlight = (ev)=>{..., "ev" refers to the click eventlistener, is that correct? If so, how does the computer make that reference? How does it know you mean the click event and not some other event? Is it because you also have "ev" in this fuction: d.addeventListener('click', (ev)=> ?
Ev is an event being passed to the function it could be any event. You can have multiple event listeners that all call the same function. All those event listeners will pass an event object to the function. The event object has a type property that tells you what kind of event it was. They also have a target property that tells you which object had the event happen to it. Based on those two things you should know which event listener called your function.
Can you please show how to call a "on click" function on a button that is created inside a loop..... For eg: I have a for loop to create table rows and inside each row, i have a delete record button.... how to use that remove button to remove the record at that particular index... Thankyou.
This should help you - czcams.com/video/MGstKhPoiho/video.html
Crystal clear 👌
Brilliant tutorials :)
great explanation!
Cool. Thanks for great tutorial
Awesome tuts dude! probably the clearest of all J.s chaos tuts out there , maybe you could explain whats the difference between DOMContentLoaded / window.onload / ets.. there are like 10 more out there , and no clear explanation on web \\../ thanx!
Please add that suggestion to my tutorial request video comments.
The request video link - czcams.com/video/LCezax2uN3c/video.html
I have finished that video now - czcams.com/video/8rc0zaTn2ew/video.html
Thanks Man, great video
thanks for your clear explanation, can you tell me are videos in order or not ??
A few of the playlists have a specific order. But most videos are just related by topic. There is no required order
@@SteveGriffith-Prof3ssorSt3v3 thank you again :)
Hello sir in javascript Cannot read properties of null (reading 'addEventListener') showing
Whenever you see that error it means that Javascript doesn't understand the variable in front of addEventListener
@@SteveGriffith-Prof3ssorSt3v3 then how to add variable but in HTML working
@@dheerajkupnoore6291 the error means there is something done wrong or mistyped in your code.
@@SteveGriffith-Prof3ssorSt3v3 ok thanks you sir
But internal file not showing error but external javascript file showing error please make video on this sir . Thanks
Can we create a water dropping effect with that? I think it is possible
event bubbling and propagation is how events are delivered to DOM elements that have listeners attached. Those listeners are async and held on the task queue. Not really meant for animation.
requestAnimationFrame is the best way to do animations - czcams.com/video/zBRqnSiq_VM/video.html
I also have a video coming very soon about tasks, microtasks, and requestAnimationFrame.
@@SteveGriffith-Prof3ssorSt3v3
Waiting 😃 for the new course
@@SteveGriffith-Prof3ssorSt3v3
rn I am watching the playlists js from start and I will watch video you suggest as well
HTML code is not available on github ?
In the first couple years of the channel I was not posting all the code that I wrote.
thank you very much about those helpful tutorials ; i run the same code and bubbling does not work ;
even i run your code mister steve too in chrome browser and the prbml ;
ig google chrome moves out this !!
Bubbling is the default behaviour for every event in the DOM. When you call
element.addEventListener( eventType, func, usecapture )
That 3rd parameter defaults to false, which means if you didn't put anything there the events are automatically bubbling. It's not something that can fail.
can you give the css codes?
main,div,p,span{
padding: 2rem;
line-height:2;
outline:1px solid red;
}
main{
background:#ddd;
width: 600px;
}
div{
background:#aaa;
}
p{
background:#777;
}
span{
background: #eee;
}
.gold{
background:gold;
}
Emazing ..
what is the css you given?
I didn't save it when I made this video 6 years ago, just the script.
@@SteveGriffith-Prof3ssorSt3v3 ok sir I done it with my own logic
@@anandkholkute44 that's the best way to learn.
head[i].addEventListener('click', function(e){
e.stopPropagation();
console.log();
// function to handle side menu
let evt = e.target;
if(evt.className == 'menu-btn'){
menuArr[0]();
}else if(evt.className != 'menu-btn'){
menuArr[1]();
document.body.removeAttribute('style');
};
// the "nav-i" element is an tag with nested elements, but i want the event to fire for the tag even if an element //inside is clicked. the code below relods the page if the nested element is clicked . where am i going wrong?
if(evt.className == 'nav-i'){
e.preventDefault();
console.log('prevented');
obj.style.display= 'flex';
};
// console.log(curr);
});
It's very hard to say with only half the information. I dont know what head or menuArr are. I dont know the structure of your html is or how the classes are designed to fit together.
@@SteveGriffith-Prof3ssorSt3v3 okay so head is a header in which i have my navigation and all that.
so i added the handler on the header . menArr is just an array which stores some value returned from another function . as u know already this can be done with closures. so that's what it is
@@SteveGriffith-Prof3ssorSt3v3 li role="tab">
name here
8
name here
this is the section of the code i want to target. and have in mind it is nested in the header with all the appropriate tags to make a navigation. i thank you in advance
Again, I would need to see more of the script to understand your closures or why you are trying to run a value from an array - menuArray[0]( ).
This article may help you with your issue though - css-tricks.com/slightly-careful-sub-elements-clickable-things/
@@SteveGriffith-Prof3ssorSt3v3 thank you i
Hi steve, is login not an event?
No. Button clicks and form submissions and page loads are but not login
The volume is way way too low
The videos I did back in 2017 were with the built-in mic and a cheap headset.
I got a really good mic in 2018.
terrible audio quality