Event Listeners - Javascript - Tutorial 14 

You're the best programming teacher on youtube in these beginner tutorials

Most important video in this playlist so far, thank you for this great tutorial.

I learnt html, css and javascript watching u...u are a guru

Love the font style and size too, super easy to read

you explain things so good !! Big compliment from Austria

The cornerstone of front end, thanks for the explanation, you're a good teacher

This was just what I had been trying to find a video. I love your videos!

just finished learning Tutorial 14.Thanks to Mike

I'm new to JS, and this video was exactly what I was looking for, in terms of teaching me how to use the listeners on a JS file linked to my HTML file. Thank you for this, definitely subbing!

The best explanatory video on the web.. thank u

This was soooo helpful, thank you so much! You explained it very well!

This is simply the best explination I have seen for this part of javascript, one quesion: why do you use var image and not let image in index.html ? Thank you very much!

very easy to understand when mike dane teaches

I have got a question... could someone please tell me what 'this' means inboth cases it is used. example.: this.width example.: onclick = "handleClick(this)"

For anyone watching using classes in stead of ID in your html, this is what you have to do for event listeners: var something = document.getElemtsByClassName("class-name"); for (var temp = 0; temp < something.length; temp++){ let someVar = something[temp]; someVar.addEventListener(THIS WILL WORK) }

From an organization perspective , what do you recommend, to add all event listeners in your html page inline, or have your html and styling seperate, and then have your JavaScript file specifically for adding event listeners and handle user interaction

Can I "call" an audio link inside that onclick function so when the button is clicked it makes a sound? Trying to add audio to a counter button.

I'm having some trouble with the addEventListener section (around 7 to 9 minutes in). Here's my code, which I've copied from the video several times and tried in both Safari and Chrome, but the image doesn't pop out at all: function handleClick(element){ element.style = "background-color:blue;" } var image = document.getElementById("image"); image.addEventListener("mouseover", function(){ this.style ="box-shadow: 2px 2px 2px grey"; this.width ="110" }); The "image." and "this." both appear white in my .js document, not red as in Mike's. Any advice on how I can make this work?

Thank you for sharing. That was really clear and helpful .

very clear. very concise. thanks

Your stuff is great! Thank you!

So with the image, you do mouse out to set the image back…. But for the button, what event listener would I use to set the button back to its original state 😞 help someone please

wow great explanation

Man you saved my life.. thx so much

Was super helpful information, alough the :hover in css would have worked fine too.

i enjoyed your tuts. How would you add event listeners to make a box grow, resize turn blue and fade out using 4 diff buttons.I am new to java script

my function isnt quite working this smoothly. I can only change the box-shadow, not the height.

good stuff dude. helped me alot!

Why we events are usee with function to be executed?

is it not working on visual studio code?

good video just 1 suggestion keep your code zoom out because when you zoom in and start coding half of the code gets cut

Clear voice and Zoom most plus points ..

my image just disappears? I followed along exactly so im not sure what went wrong

for those who are having trouble with the code in the video for mouseover and out effect can try the code below, its much more simple in my opinion . function bigImg(x){ x.style.height="150px"; x.style.width="150px"; } function nrmlImg(x){ x.style.height="100px"; x.style.width="100px"; }

1:34, "onclick" is not javascript event. A "click" is. "onclick" is event handler.

ty man.very nice instruction

Thanks!

I love you sensei

Please make a video in React

Nice

Beat Man thx

best!!!

This usage of “this ” is just out of nowhere… it is so strange n feels so fluky…

W3 school is very usefull

This would be a lot easier using CSS

who hurt the person who disliked this video

Alert("your the fucking man;")

5:30

man you gotta stop zooming in all the time it gets me confused

Nice