Event Listeners - Javascript - Tutorial 14

Throughout the course we'll be looking at various topics including variables, arrays, getting user input, loops, conditionals, interacting with the DOM and much more.

[MrDarkogaucho]

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

[vadrif-draco]

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

[joshuajoshua]

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

[snackmami]

you explain things so good !! Big compliment from Austria

[MrStephen]

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

[simbaevans.]

just finished learning Tutorial 14.Thanks to Mike

[RobertGuilman]

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

[elizabeth]

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

[jmarq]

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!

[HalValla]

For anyone watching using classes in stead of ID in your html, this is what you have to do for event listeners:

var something =
for (var temp = 0; temp < something.length; temp++){
let someVar = something[temp];
someVar.addEventListener(THIS WILL WORK)
}

[pasej]

The best explanatory video on the web.. thank u

[amandavanderheyden]

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

[entity]

very easy to understand when mike dane teaches

[kartikkrishnan]

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

[rajromil]

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 .

<img id="image" src="crr.jpg" onmouseover="bigImg(this)"
onmouseout="nrmlImg(this)" width="100px" height="100px">

<script type="text/javascript">

function bigImg(x){
x.style.height="150px";
x.style.width="150px";
}

function nrmlImg(x){
x.style.height="100px";
x.style.width="100px";
}
</script>

[marksiely]

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!

[prod.kashkari]

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

[burhanali]

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

[ohad]

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

[theasychair]

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