Introduction to JavaScript Event Listeners

[@manastripathi2407]

steve knows what he is doing.. far better than any UDEMY course.

[@nirmalsankalana6479]

Absolutely true

[@rapoliit]

Yes. Without any doubt. And yet so practical.

[@RayquanRogers]

I’m assuming by “any” you mean that you tried every course, yes?

[@AndrewKwabula]

The chilled voice makes his teaching easy to assimilate. Steve knows his JS.

[@sandip_bettereveryday]

You have that rare skill of a true teacher.

[@gazell3s]

Best introduction to event listeners I've come across on KZbin. The only one that clearly explains why we don't include the () when passing the function in the event listener's argument. Thanks so much!

[@andyj748]

Well done Steve. You have clarity ( which is rare in tutorials these days)! I also appreciate that you regularly talk at a conversational pace. Even I can understand you. Well done !

[@thickerthoughts9107]

He knows his stuff.

[@terryrocker8681]

Wow!! I usually never comment but for this omg! you are the best teacher! why you have very less views for this amazing explanations?

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. The views are growing slowly. Please subscribe and share the channel to help others learn too.

[@eh-lo2do]

@@SteveGriffith-Prof3ssorSt3v3 maybe its growing slowly, but it sure the best channel by far, i've been learning for 3 years and still stuck and you clear alot of things, you are great the way you are keep doing that

[@KeepLearing]

Yeah I totally agreed! I said this to him before that he is underrated. he is definitely one of the best out there but like he said himself he is growing and when it comes to views it's not just him, every other channels, every other contents, they are all have to start somewhere and they eventually grows because us human beings we know what's good, what's not. soon It'll come, he's actually really good with all the explanations on everything. I've compared him to another videos, other channels and he's actually very clear/cleaned by far but he's definitely underrated like I said to him before I hope he goes far in what he want to achieve but he knows he's good

[@shehan.akalanka]

I was looking for a while for a video series like this. Your latterly explains everything what are you typing. Thank you so much.

[@hou-yawang516]

I am a JavaScript beginner and your professional tutorials are really helpful! You are the best! Thank you very much Steve! Much appreciated!

[@ozzyfromspace]

You're the most chill instructor ever. I love it! Guess who's about to watch your entire "JavaScript From The Start" playlist? I have a feeling I'll really enjoy listening to your well-paced explanations of everything 😊. I wish your channel well, Steve! #Subbed

[@EmadElSammad]

I agree. Very chill and unlike the other instructors who try to brag about their skills and go too fast. Please keep that pace and detailed teaching. Thank you

[@sharketespark6495]

You are the bob Ross for coding.. it's peaceful, satisfying and very informative. Thanks professor I wish I could learn from you face to face

[@SteveGriffith-Prof3ssorSt3v3]

Come to the Mobile Application Design and Development program at Algonquin College and you can. 😀

[@sharketespark6495]

@@SteveGriffith-Prof3ssorSt3v3 yes sir I wish, as I'm from India there is no support for me to visit you and your beautiful college. I'm grateful for your lessons here btw

[@digigoliath]

Something tells me that I will be listening to this video many more times. Very good for a refresher too!

[@kingwoodbudo]

Getting into your older videos now. Your style hasn't changed and it's inspiring to learn things, in deeper detail, I wish I knew years ago. Thanks, Steve!

[@naampondpat5769]

This is the best Event Listeners video I have ever watched. so thorough. Thank you!

[@imanidioli]

You transfer your deep understanding of subject so influentially to your audience

[@thickerthoughts9107]

I get a small high when I see Code Gist, in your description box. LOVE WHAT YOU DO!

[@ryanwoods3333]

love your teaching style. concepts explained very clearly. the best teacher on youtube. Thank you!

[@rotrose7531]

Thank you for another thrilling tutorial, finally you released me from copy-pasting other's addEventListener forever! The other thing I especially appreciate is the explanation of the position of the script tag and the workaround. Before your explanation, I usually put them anywhere depending on feelings. Thank you.

[@nakiapringley5391]

Alsome video, thanks. Just getting into javascript, Because of you step by step explanation of event Listeners I'm understanding the concept even more.

[@jinghanwang8552]

Thank you so much for you videos which have figured out almost all js problems I've met by now!! I don't understand why you just have 31K subscribers, you deserve more!

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. Keep sharing my videos and it will keep growing.

[@conradmbugua9098]

Love how the keyboard type sound effect is relaxing and also the mouse click sound effect😄

[@ajaykonathala]

Like Steve Rogers for Avengers. Steve Griffith for Javascript. You are zing zing Amazing. Thanks a ton !.

[@ro3843]

I really like your videos, you are truly the best teacher I found on youtube. However please increase the volume of your audio and the quality. It's so hard to hear you so when a commercial comes up my eardrums get blasted cuz I have to keep the volume up so high

[@SteveGriffith-Prof3ssorSt3v3]

I got a better mic years ago. Some of my old content has poor audio.

[@tiborvegh700]

Thank you Steve, your style is so relaxing it is easy to stay focused on the subject.

[@vlknlvnt]

Just saw the video when it's necessary. Pure and simple. Thanks a lot.

[@padaricohora9094]

Great video, looking forward to watching the whole series. Thank you Steve Griffith

[@DomodossolaTune]

Steve, your explanations are just perfect. Thank you!

[@mohankadolkar1227]

Excellent!! Very very clear explanation. Understood the default browser behavior as the demo makes it abundantly clear. The entire 22 minutes are loaded with concise, precise and direct explanation that a beginner needs. You've hit upon the beginners' needs, ie, the extent to which things should be simplified. I'll find out if you've courses on udemy platform and subscribe. Keep it up. Thanks.

[@digiexploration530]

great video, Steve. the video is super-awesome. I subscribed and gonna manually-search you in the youtube list of vids whenever I come back with other questions

[@AlanRickman2]

Excellent video explanation! Very relaxed and smooth explanation.

[@TheWolfPackFam]

Wow! Thank you for such an awesome and well explained video! I only wish I had come upon your video first.

[@michellel.4691]

Loved this video! Thank you so much for explaining event listeners. Learned a lot especially when to use named and unnamed functions and also how to properly implement the DOMContentLoaded event. Thanks!

[@codeorcode]

Best tutorial ever , Please keep uploading new JS videos

[@All-about-Jesus]

exactly what I needed,detailed and very insightful. Thank you for a great video!

[@farshadaghasharif2986]

I like this Video & and i pushed 👍🏻 . from now on i like every video from you Dear Steve 💗 Because i know they are the Best

[@abhishekbharani543]

Excellent video. I understood easily here. Wow

[@dargavenugopal7839]

Steve , you are best teacher, with detail. wish you have created java script course like this with details. if so please do let me know.

[@SteveGriffith-Prof3ssorSt3v3]

I create playlists by topic. Some videos are in multiple playlists. Check my channel home page and go to the playlists tab

[@dargavenugopal7839]

@@SteveGriffith-Prof3ssorSt3v3 sure, thank you

[@rodolphe8859]

thanks very much ,it's very clear, even been French,i totally understood what you've explained.And thanks to show thinks very usefull to go ahead

[@achinthakaveen1993]

thanks for amazing introduction thanks from Sri Lanka💕💕

[@joshjack1658]

you just took my headache away thank you!!

[@antolapalma4266]

super.method('fantastic').... best tutorial on Event Listeners

[@xerxius5446]

Instead of putting script tag at the end, you can also use defer attribute to tell the browser to load script after the DOM is ready. Ex: * *

[@SteveGriffith-Prof3ssorSt3v3]

I have a video on using the async and defer attributes

[@Martin958]

@5:54 if you returned 7 to the browser, would the console.log's of (ev.type) and (ev.target) not happen first? They are executed before the return statement, so I thought they would still work as required.

[@SteveGriffith-Prof3ssorSt3v3]

The two console log statements will still be executed because the function is being told to run. The value of 7 will be discarded because it is not being used when returned.

[@Martin958]

@@SteveGriffith-Prof3ssorSt3v3 I think I understand now. 7 is returned to doSomething( ) and sits there doing nothing. I am still surprised a value can be returned to a function call since it's not a variable. I thought a syntax error might have occured here instead.

[@SteveGriffith-Prof3ssorSt3v3]

@Martin958 to be clear, the 7 is returned from the function.

[@lukerbs]

excellent explanation

[@Tekneeks25]

awesome video!! so clear and very easy to understand

[@MOTAZ722]

keep the good work! a new subscriber!

[@CesarJuarezVargas]

17:23, "input", "click", and "change" need no mention or declaration on the html document, right? Is "blur" used by convention or can I write "leave" instead?

[@SteveGriffith-Prof3ssorSt3v3]

There are predefined event TYPES. You have to use the proper string to refer to them. "click", "blur", "focus", "mouseover", "mouseout", and others are all predefined. They are Strings so they don't need to be declared. If you visit this page: developer.mozilla.org/en-US/docs/Web/API/Event you will see a list of all the categories of Events. Click on one of the categories, like "MouseEvent". Then scroll down the page looking at the left-hand menu. You will see a section called "Events". That is a list of all the predefined types of MouseEvents.

[@aligu7]

Thanks for good tutorials!

[@EmadElSammad]

Well done explaining this subject. I was just hoping you could have explained the .type and .target a little cause it threw me off track, but other than that the vid is great. Thank you

[@SteveGriffith-Prof3ssorSt3v3]

This is just one video from my playlist of videos about JavaScript Events - kzbin.info/www/bejne/e5K1o6CFqbWMiq8

[@EmadElSammad]

Steve Griffith will go watch the link now. Keep up this pace and detailed explanation please. It's unique

[@aurelijusv]

Great tip about 'DOMContentLoaded'. However I have faced other issue. I cannot make it work in an object's prototype. Event listener triggers fine, but query selectors ('this' property from the object) brings back undefined value.

[@SteveGriffith-Prof3ssorSt3v3]

Dealing with `this` is a whole other thing. kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY kzbin.info/www/bejne/m4iniZqpfsyHfc0

[@cecomecoev4796]

I keep repeating myself but - Thank you for taking time and efforts to make those great courses. Jus to add - Your voice is very teacher like, calming. I would like to ask you - Should I understand that DOMContentLoaded is the pure JS equivalent of jQuery document.ready ?? I have some on the fly knowledges but so far did not have a chance to go through the theory like just now. Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

Well, my full time job is as a professor. So, it helps to have a teacher like voice. :) DOMContentLoaded is the pure JS version of jQuery document.ready. i have a series to help people get rid of jQuery with pure JS. This is the video from that series about document.ready - kzbin.info/www/bejne/eKjTlK1japJ5oqc

[@flanderstruck3751]

Thanks for explaining the whole utility of ".target". Wish they explained this naturally at Codecademy

[@asgharibraheem8938]

provide very good understanding, i have little bit confusion on use of 'init' function at end of video, is it reserved or we can use it because we use it for lot of other purposes

[@SteveGriffith-Prof3ssorSt3v3]

Init is just a function name that I use. The name implies initial function.

[@truth-12345.]

Even at the intro I already noticed he is a great teacher. I already paid an online class damnit. Mr. Griffith what online class are you doing right now?

[@SteveGriffith-Prof3ssorSt3v3]

I just finished playlists on indexed db, service workers, and PWA.

[@sudoaoqi7592]

question, I did exactly same as you did to trigger the function buttonClicked, but there are nothing on my web page inspect. I am wondering if there are more setting behind to connect local host and file.

[@SteveGriffith-Prof3ssorSt3v3]

The files in my example are in the same folder. That is all that is needed.

[@sudoaoqi7592]

Steve Griffith thanks, I will check it out again. Btw, I love all your videos. You actually inspired me to learn from zero. Thanks

[@mgusa9372]

Steve, If it's not off-limits, I'm interested in knowing about the icons at the bottom of your computer screen that you use to operate in multiple web dev-related environments, what they are, and how to set them up. Tks! Am a big fan!

[@SteveGriffith-Prof3ssorSt3v3]

A lot of them are development versions of the different browsers. There is Android Studio and Xcode. Postman and Insomnia are tools for testing APIs. I use Slack as a communication tool. I use several Adobe programs - Photoshop, Illustrator, and XD. Those and the Terminal are all the common dev and design tools that I use.

[@mgusa9372]

@@SteveGriffith-Prof3ssorSt3v3 Thank you so much! You are an insanely good instructor I am incredibly grateful for your videos on the various subjects within web development. I am very much looking forward to studying many of your videos. Thanks again, Steve. All the best.

[@leythecg]

great tutorial! Many thanks!

[@zaheerabbas8344]

very nice sir, is it better to use (deferred or async) rather than to add last function(function ('DOMContentLoad',init) at tutorial time 21:06(mints)

[@SteveGriffith-Prof3ssorSt3v3]

It's better to have both defer AND the DOMContentLoaded init. The defer is technically all you need... but if it is ever left off the DOMContentLoaded catches the problem.

[@CesarJuarezVargas]

On 5:51: why did you chose to write "return 7;" instead on other console.log? What's the rationale behind the 7 replacing the doSomething? What's the relation between those two lines?

[@SteveGriffith-Prof3ssorSt3v3]

That was to illustrate the fact that if you put "doSomething( )" instead of "doSomething" as the second parameter of the addEventListener method, then it is the return value from the function that will be run when the user clicks, instead of running the function doSomething. The important thing was to NOT add the ( ) to the end of the function inside the addEventListener method call.

[@aquagrenh]

How can i use event listener to make a div="box" grow in height, reset height, change color and to fade out.My buttons are grow reset change fade.. These are my codes yet they do not work: Grow Blue Fade Reset document.getElementById("button1").addEventListener("click",function() { document.getElementById("box") innerstyle.height = "250px"; }); document.getElementById("button2").addEventListener("click",function() { document.getElementById("box").innerstyle.backgroundcolor ="blue"; }); document.getElementById("button3").addEventListener("click",function () { document.getElementById("box").style.backgroundcolor="gray"; }); document.getElementById("button4").addEventListener("click",function () { document.getElementById("box").style.height = "150px"; });

[@SteveGriffith-Prof3ssorSt3v3]

There is no such property as innerstyle. That is your error

[@Brombrom41]

Hi, do you have a video which shows dynamically adding event listener to dynamically created elements? Eg: click event to newly created li element? Thank you for you wonderful videos. These are second to none.

[@SteveGriffith-Prof3ssorSt3v3]

I've got a couple videos that show how to fetch some data from a remote API source kzbin.info/www/bejne/g6S0Y62npa2robc kzbin.info/www/bejne/h4q0pGCQacSnmdU If you wanted to add a click event to any of those elements, just take the variable that holds the element that you just created and call addEventListener( ) on that variable. Eg: let p = document.createElement('p'); p.addEventListener('click', someFunction );

[@Brombrom41]

@@SteveGriffith-Prof3ssorSt3v3 I am sure you have heard this but just to be sure, the wonderful darksky api you have been using has gone dark. It was recently bought by apple.

[@SteveGriffith-Prof3ssorSt3v3]

@@Brombrom41 I actually hadn't heard. Thanks

[@chesterxp508]

Brilliant tutorials :)

[@ryof81]

hi Prof, I create function inside addEventListener click event which create element and append child and i put this addEventListener inside for loop. how to make sure that element created and child appended before next addEventListener for each loop ?

[@ryof81]

sorry, my question is wrong, what i mean is I create for loop, inside for loop i create element and append child and for each of that element i put addeventlistener click event, but the function inside addeventlistener did not work properly

[@SteveGriffith-Prof3ssorSt3v3]

Depending on how you added the event or element its hard to say what is wrong. When you added your event listeners did you do it like this: elem.addEventListener( eventType, func( ) ) or like this: elem.addEventListener( eventType, func ) ? The first way is calling the function immediately and NOT waiting for the event. Another thing to consider is that it is usually better to have fewer event listeners. If you want click listeners on every element in a list, it is better to put ONE click listener on the UL than a separate listener on each LI. See here - kzbin.info/www/bejne/g3jWpX6ehdScntE

[@CesarJuarezVargas]

the ev.target line is for us to "discover" what was the myDiv HTML part that was involved in the event, right? Like uncovering the "culprit" of the event. =)

[@SteveGriffith-Prof3ssorSt3v3]

Essentially yes. ev.currentTarget and ev.target both will give you a target object but can return different objects if you have nested HTML elements that all have their own event listeners.

[@biniyammengiste7413]

very great brother, thank you

[@deehee1181]

I am a little confused. for "ev", which is the parameter you passed to the function. when you do addeventlistener, you only defined the event type and which function to call and never pass things to the function you are going to call. How does the function know what "ev" is and use it?

[@SteveGriffith-Prof3ssorSt3v3]

addEventListener is a method that accepts two parameters - an event type and a reference to a function to call later (a callback function). When the event happens then the addEventListener method calls the callback function and passes the Event object to that function. In my example I use the variable name ev but you can call it whatever you want. It will always be the event object. It will always be sent by the addEventListener method.

[@mohammedabdulaziz3658]

Solid basics 👌

[@Sarkwer]

Hei ty for the explanation. Can you tell me how the system know what "ev" is? You keep call it in functions but you never assing any value to it wnd i dont understand how the system know it is the event.

[@SteveGriffith-Prof3ssorSt3v3]

Every function that is called by an event listener will be passed the event object by the listener. Always. Every time. So, we just need to provide a variable to receive the event object. I prefer the name "ev". element.addEventListener("click", f1); element.addEventListener("mouseover", f2); element.addEventListener("mouseout", f3); function f1( ev ){ //ev is the click event } function f2( evt ){ //evt is the mouseover event } function f3( myEventObject ){ // myEventObject is the mouseout event } Call it whatever you like but the variable will hold the event object.

[@Sarkwer]

Oh thank you for the explanation thats make a lot of sense.

[@hood_love_189]

hi steve im kinda lost on adding the 'ev' part, can you explain this a little bit more please

[@SteveGriffith-Prof3ssorSt3v3]

When a function is called because it was referenced by the addEventListener( ) , it will automatically be sent an Event object. `ev` is just a variable. It will hold the Event being passed to the function. Like all variables, you can call it whatever you want. But it will still be holding the Event object.

[@czsniper]

Thanks. A new subscriber and +1 like !

[@maspoetry1]

i get very confused when using example window.onclick = fn(){} Is that the same than window.addEventLostener('click', fn(){}) ? this way I can see that event listener is a method, on the first approach I just can't. What can i do ? also, is the keyword this referring to window in this example?

[@SteveGriffith-Prof3ssorSt3v3]

The DOM and its methods went through changes and versions in the early years of the web. element.onclick = f That was the original limited way of adding a listener to anything. You could only have one function at a time connected to an event. element.addEventListener(eventType, f, useCapture) This was the eventual replacement which gained cross-browser support. The amount of time it took for this to become standard is one of the main reasons why libraries like jQuery were created. This version works in conjunction with removeEventListener and lets you add multiple functions to the same event on the same object. This is the recommended way to add ilsteners. The most recent change to eventListeners is the options object that has replaced the useCapture parameter - kzbin.info/www/bejne/gGGZhq1topJ9pJo

[@maspoetry1]

Steve Griffith thanks man you're my bible

[@CesarJuarezVargas]

Would it be valid to write "function.doSomething(click) instead of ev or is it mandatory to define "ev" within the console.log line?

[@SteveGriffith-Prof3ssorSt3v3]

ev is just a variable name. function doSomething(ev){ } is the function declaration. ev will be the event object.

[@rach360]

best video. Thank you

[@igorr4682]

Any plans for creating video series on vue js?

[@SteveGriffith-Prof3ssorSt3v3]

At some point likely yes

[@bishalsenhdri7655]

Thank you for your crystal clear plus fluid explanation.☝#⃣1⃣ Now I'm perfect on this.. 🙏👦👏

[@LFDLittlefluffydino]

I have a question. Say I filled out a character form, and I want that character to appear in a group they belong to. How would you do that?

[@SteveGriffith-Prof3ssorSt3v3]

Sorry. I don't understand what you are asking.

[@LFDLittlefluffydino]

@@SteveGriffith-Prof3ssorSt3v3 I am trying to make a website that lets you make your own cat characters and "store" them in the browser. For example: say that you made a drop-down list of states your character is from. There's a few states on the home page so when you click an option from the drop-down list on the character template, the character's name appears under the state name you selected.

[@Mehedihasan-rahat]

Dear Mr.Steve in addEventListener('click',doSomething).... in here you just pass the function reference. You never call function like this doSomething().... my question was than how addEventListener execute internally?? Could you please explain the internal fact explicitly please ... Waiting for your respond.. And thanks once again for your smart lecture. love and care from BANGLADESH

[@SteveGriffith-Prof3ssorSt3v3]

As I explain in the video, it is the addEventListener method that is responsible for calling the function. You pass a reference to the function to the method so it can be used like a callback function. I have videos on higher order functions and callback functions if you don't understand how those things work.

[@CesarJuarezVargas]

You indicated that myDiv could be any part of your html code, but would do you "call" that html part on the js document? Is myDiv a variable that you declared earlier on the html? I'm confused there.

[@CesarJuarezVargas]

RECALL: I realized that you declared the variables on HTML and then "pulled" them on the js file.

[@kirankumar-iz3tw]

Excellent bob

[@kirankumar-iz3tw]

Steve how to update a value to ui from javascript without refreshing...I mean two way binding

[@tedfitzpatrickyt]

As of July 2018, I wonder if native js DomContentLoaded is being used more than jquery's $(document).ready

[@SteveGriffith-Prof3ssorSt3v3]

It's hard to say absolutely. jQuery's usage has finally started to drop - remysharp.com/images/jquery-year-on-year.png - 2018 is falling more than 2017. There are a lot of websites that use really old versions of jQuery. These are websites that may not have been updated in years. There are other frameworks like Bootstrap v3 which require jQuery to work. These frameworks are dragging jQuery along with them. I stopped teaching jQuery to my students in 2015. That's not to say that there are no longer jobs that you may encounter jQuery. Just that if you know the vanilla JS way to do things then you can pick up jQuery in an afternoon. I don't think it is relevant to spend the time learning the library. It appeared as a great way to solve browser interoperability and compatibility issues. Most of those don't exist any more. Support for old versions of Windows and old versions of IE are not the driving force that they used to be.

[@christiancolewan]

Proffessor Steve Knows best

[@SuCKeRPunCH187]

preventDefault() doesn't seem to work for me, same exact code and it still goes to the google link. Nothing written to the console.

[@SteveGriffith-Prof3ssorSt3v3]

preventDefault( ) is a standard method available in all browsers. As long as you are calling the function with an event listener then you will have the event available inside that function and be able to call preventDefault on that event.

[@HawkwardAlaskan]

I know this was forever ago, but couldn't you just use "defer" when calling the script instead of a listener within the script? Am I understanding that right?

[@SteveGriffith-Prof3ssorSt3v3]

You could but best practice is to keep the listener inside your script in case the defer is left off or an old browser that didn't understand defer gets used or your script is used in someone else's webpage that didn't have the defer.

[@suhan7185]

Why does the function trigger without the actual event listener code being executed.

[@SteveGriffith-Prof3ssorSt3v3]

addEventListener( ) is a method that attaches a listener object to the DOM element. When an event of the correct type is triggered on the DOM element, the function gets called at that point. It gets called by the listener object that was attached to the DOM element.

[@suhan7185]

The function is triggered irrespective of the click trigger 1st case: you do pass the arguments which is an empty argument.hence the function gets called but in the second case no arguments are passed 2nd case :here function is a reference and you don't pass any args but whenever a click event is triggered it passes an argument explicitly to the referenced function anyFunc=()=> { ..statements }

[@suhan7185]

Is this a better logic of how events listeners work

[@SteveGriffith-Prof3ssorSt3v3]

@@suhan7185 The event listener object always passes the event object to the function. It is up to you whether you accept it and use it in your function.

[@suhan7185]

@@SteveGriffith-Prof3ssorSt3v3 yep got it.

[@uchennachukwuba]

Could you do a series on DSA?

[@SteveGriffith-Prof3ssorSt3v3]

DSA? If you are referring to Data Structures, I started a playlist on that - kzbin.info/www/bejne/bZyqaYyfj82Cjck Just haven't had time to add more videos to it yet.

[@uchennachukwuba]

@@SteveGriffith-Prof3ssorSt3v3 Yes, data structures and algorithms

[@amirealahzan8722]

this is really amazing!

[@xxleben85]

how come for the addEventListener 'init' didnt need a ()

[@SteveGriffith-Prof3ssorSt3v3]

Because we are just passing the name of the function to be run later. We don't add the parentheses because that would make it run immediately instead of waiting for the event.

[@aquagrenh]

I changed the property but still the block is not reacting when I press the buttons May be I am missing some more coding. I am very new to this. See below thanks Jiggle Into JavaScript Press the buttons to change the box! Grow Blue Fade Reset document.getElementById("button1").addEventListener("click",function() { document.getElementById("box")style.height = "250px"; }); document.getElementById("button2").addEventListener("click",function() { document.getElementById("box").style.backgroundcolor ="blue"; }); document.getElementById("button3").addEventListener("click",function () { document.getElementById("box").style.backgroundcolor="gray"; }); document.getElementById("button4").addEventListener("click",function () { document.getElementById("box").style.height = "150px"; });

[@SteveGriffith-Prof3ssorSt3v3]

You're missing the period in front of style for the first one. Background color needs a capital C on color. You don't need jQuery.

[@naomiz5099]

Thanks a lot!

[@dinamohammed8558]

i'm listening to this course in 2023 and i have a question,do these events still the same right now or there's an upgrade and some had changed ....i'm new to javascript and execuse my bad english

[@SteveGriffith-Prof3ssorSt3v3]

This is still how events work.

[@dinamohammed8558]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for replying

[@infotrady2178]

Came here to ask the exact same question! :)

[@irakli.asatiani]

Sir what is the keyboard model?

[@SteveGriffith-Prof3ssorSt3v3]

What keyboard?

[@irakli.asatiani]

@@SteveGriffith-Prof3ssorSt3v3 the keyboard you're using in the video, I like the sound

[@SteveGriffith-Prof3ssorSt3v3]

@@irakli.asatiani not sure. I have used many different keyboards making these videos

[@irakli.asatiani]

@@SteveGriffith-Prof3ssorSt3v3 This is especially clicky one

[@SteveGriffith-Prof3ssorSt3v3]

@@irakli.asatiani I couldn't say. I have used several laptops with multiple external keyboards making these videos. Never paid attention to which was being used.

[@yarik83men51]

Very Nice... Thx

[@tripledo]

Steve in this example I don't understand why you are not seeing the lower events bubbling up as the different levels are indeed nested. It seems like it is not clear when bubbling will happen versus not because in this example shouldnt we see that affect happening as well. Just FYI... I've watched several videos, yours and others and while it all seems clear, it is not consistent it seems. Maybe I'm missing what is actually stored in the Dom.

[@SteveGriffith-Prof3ssorSt3v3]

The bubbling of the event can be controlled by the third parameter (not shown here as it is an optional parameter). The event can be captured in the bubbling phase or the capture phase. Bubbling can also be intercepted and stopped with stopPropagation( ) or stopImmediatePropagation( ). There are two properties to look at the element that is receiving the event - target and currentTarget. I have videos about the bubbling, the propagation and the target vs currentTarget to explain all these concepts and how to understand what can change. This video is really just the introduction to the concepts of events. There is a lot more to learn about them.

[@TropicalMug]

great tutorial!

[@farshadaghasharif2986]

Great tutorial 👍🏻👍🏻👍🏻 💗💗💗 and the BEST . but your voice is a little bit low . please a little bit louder and faster (if it is possible ) :( think to listeners instead of just EventListeners !

[@SteveGriffith-Prof3ssorSt3v3]

The speed I talk is for my students. Many are international and need the slower pace. You can speed up the video in the player. My old videos were made with a cheap microphone. All my new ones have a good mic.

[@farshadaghasharif2986]

@@SteveGriffith-Prof3ssorSt3v3 Sorry for my wrong judge . i didn't know that . You are a Good Man (With High Quality Tutorials . Thank You Steve and Sorry) . i modified my sentences . sorry again 💗💗💗

[@SteveGriffith-Prof3ssorSt3v3]

@@farshadaghasharif2986 No apology necessary. Thanks for watching.

[@RainOnline]

my eventlisteners dont work at all ive tried it all

[@SteveGriffith-Prof3ssorSt3v3]

Something must be done wrong. Check in the browser console for error messages. If there are no errors check to see if the script is attached and running. Use console log statements to test

[@westfield90]

Thank you

[@iulicush86]

I really enjoy the way you structure your videos and how you explain all the concepts, but, man, this low volume/quality voice recording is really making it hard to watch these videos. The newer ones are much better, but these old ones...

[@SteveGriffith-Prof3ssorSt3v3]

3 years ago I had a cheap mic. Everything in the last couple years has much better audio

[@PhilosophicalLife454]

An easier way than the init() function would be to use the keyword "defer": this will load the script only once the page has loaded www.w3schools.com/tags/att_script_defer.asp

[@SteveGriffith-Prof3ssorSt3v3]

I have a video on the async and defer attributes - kzbin.info/www/bejne/hXzMZICOarNlo7c I encourage my students to use defer but ALSO use the init and DOMContentLoaded event. You never know when someone else will be working on the HTML and put the script tag in an unexpected place or forget to add the defer attribute. This protects your script against crashing at the start. Take everything you get from w3schools with a grain of salt. They have a history of misleading and incorrect information. If you want a good reliable resource use MDN Mozilla Developer Network.

[@noaakshay]

explanation is good but voice is very low

[@SteveGriffith-Prof3ssorSt3v3]

The videos that I did back before 2018 were done with a cheap mic. So, the audio quality then was not great. Everything in the last two years has much better audio quality.

[@tschussie]

Good teacher and chilled out voice is fine but the key strokes are just too loud in contrast. The keys actually drown out the voice at times.

[@SteveGriffith-Prof3ssorSt3v3]

The videos I made 3 - 4 years ago had a cheap mic that picked up lots of background noise.

[@tschussie]

@@SteveGriffith-Prof3ssorSt3v3 That makes sense. I didn't mean to sound too critical as I have been enjoying the video classes that you produce. Thanks.