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); }
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
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.
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.
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.
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!
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.
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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zBRqnSiq_VM.html I also have a video coming very soon about tasks, microtasks, and requestAnimationFrame.
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.
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/
