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

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.

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.

Please add that suggestion to my tutorial request video comments.

The request video link - kzfaq.info/get/bejne/gqmVrcSpl9uyY5c.html

I have finished that video now - kzfaq.info/get/bejne/btiTY92SudSWlas.html

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.

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.

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

This should help you - kzfaq.info/get/bejne/g62jp66ZtdXNmKM.html

In the first couple years of the channel I was not posting all the code that I wrote.

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

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 - kzfaq.info/get/bejne/sKiCpNGEztfDhoE.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

No. Button clicks and form submissions and page loads are but not login

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; }

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.

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.

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

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.