Planning your DOM Event Targets

[@jonathanr7906]

From your comment in the comment field I take it you are a professional teacher. That really shows. First tutorial on the subject with a great structure and clear learning goal rather than a bunch of: oh, i forgot to show u guys you can do this and then that stuff is also pretty cool. Great vid.

[@iwswordpress]

This is a very useful video as this type of process is very frequent. Very well explained and thanks for adding code link.

[@vrk4052]

Very underrated video on a very important topic , thanks for the clear explanation!

[@enfieldli9296]

Oh boy, that's a lot to take in, and still grateful of your work on this fantastic series!

[@steviewonder580]

Very peculiar content you have i haven't seen such tutorials anywhere... well done!

[@NedumEze]

Thank you so very much again, Prof. But, please, how different will this fine approach be, if you have several of the s containing identical tags and attributes? The s may have some differentiating attributes. I have several video elements on same page, I want to toggle the volume button from full volume to mute button and vice versa. How should the Listener be best set up? Button is like your , & the or < i> is the volume icon. All inside a like your . ..... . . . ..... . . .

[@SteveGriffith-Prof3ssorSt3v3]

It's hard for me to say what is the best solution, while not knowing exactly what you are building or how all your html is structured. You can add a click listener on each button if you want. You can add a single click listener on the body element if you want. As long as there is something unique about each button that lets you determine what was clicked.

[@NedumEze]

@@SteveGriffith-Prof3ssorSt3v3 Thanks a lot, Prof. I adapted your approach. And, it has worked in toggling Volume Icons. Though still trying to kill off a bug in it. What I am building is Video Gallery. Not Video Playlist. But each Video file in its own Video Element/widget with own Custom Controls. All Widgets to be run on the same Script. It had been difficult for me to figure out a way, efficient or not, to click play and play the Video in a particular widget. To Have the Duration for each Video displayed on page load, etc. But, when I saw you guide, it was Kicker. Still feeling my way through your guide. I believe that if I can fully understand your approach, I should be able to build it. But, if there's a way that I can send my html to you, I'll be extremely grateful to do so.

[@SteveGriffith-Prof3ssorSt3v3]

@@NedumEze Sorry. I don't have time to review people's code or projects.

[@NedumEze]

@@SteveGriffith-Prof3ssorSt3v3 It's okay Prof. I understand. Thanks for the help still.

[@NedumEze]

I have 2 video players on the same page, to share one Script. Both have Custom Controls. How best to set up the click event on either Playback button? Or, should each Video element have its own Script?

[@SteveGriffith-Prof3ssorSt3v3]

If they are playing in different browsers then they are running their own copy of the script. One mouse or trackpad means only one click possible at a time and you can set it up any way you want.

[@Pokemonman44441]

Damn this can really confuse someone new to the web industry

[@SteveGriffith-Prof3ssorSt3v3]

Works hand in hand with event bubbling - kzbin.info/www/bejne/gIrGaJqobqqbopI - which I teach before this topic.