Javascript Events Tutorial - How Web Developers Respond to User Input

Simple Javascript Events Tutorial with code! Almost every Web Developer finds themselves needing to respond to user actions on a page by changing content or adjusting the page display somehow. The way you do that is by listening to Javascript events.

VIEW THE CODE:

Popular Javascript Events Are:
- click
- mouseenter
- mouseleave
- mousedown
- mouseup
- mousemove
- keydown
- keyup
- blur
- focus

In this lesson, we'll add event listeners to html elements. When the users click, focus, blur, press a key, or move their mouse, javascript will get notified and we can make the webpage change.

Listening to Javascript events is a bread and butter task for web development and web developers.

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[xxXNaokiKunXxx]

You are my savior! Seriously. You are the first one, who can explain Javascript for normal human beeings.

[inner.inspire]

smart explanation for someone who doesn't have a background in web development ... thank you so much because this is the first time I've ever understand a JS tutorial

[TheMalni]

This is exactly what I needed to make my certain piece of code DRY and I had no idea how, this video is awesome!

[arthura]

Thank you so much for the videos. I'm learning everyday and I want to
get a job as a web dev, as there are a lot of opportunities here in LA.
Just a little note though:
the pic link program as is now would not hide the same image if you click it twice because when you do, the event will fire and call picLink function then all your images would have the class "hide" including the one that's actually showing and the computer would think that it isn't showing(because it has the class hide now) and will execute what's in the if condition(keep it there).
The way I fixed this was by adding an if condition like this:

function hide()
{
var allImages =
var picId =
var pic =

for(i= 0; i < allImages.length; i++)
{
if(allImages[i] != pic)
allImages[i].className= "hide";
}



if(pic.className == "hide")
{
pic.className = "";
}
else
{
pic.className= "hide";
}
}

[FrozedTV]

For real man! I'm 15 years old, and you have learned me HTML/CSS/JS/BS. You are a savior! :D

[GLENNBORREMEO]

I'd been struggling this for too long... Wow! very clear and concise explanation.. I didn't skip every ads to support this Channel! Thanks for your great tutorial!

[clownassjoe]

very nice tutorial. not just easy to understand, also the engagement in writing good code.

[salsadude]

Broo you explain JavaScript better than the professors at TreeHouse. Well done! I subscribed!

[andrikii]

Also it would be really great to cover functional tasks like:
 - simplest single-level navbar: A little more advanced navbar with dropdowns etc. 
- simplest kind of image gallery to website. Little more advanced image gallery.
etc etc - whit same approach - explanations, reasoning etc.

[andrikii]

Great tutorial, man, by far the best I have found.

Basically there are two kind of tutorials in youtube:

A) pure theory - does not teach you a lot, actually, if you dont know how to use it practically.
B) Pure practics - almost no explanation about what is coming from where etc.What is this, what is that and so on.

So I really enjoy your practical approach - where I can code step by step, more and more - with explanation at the same time. 

I wish there would be 100+ lessons with your stuff :D Hoping to get more lessons as much as possible!

[otienoremington]

i have been going through a lot of java Script books and i have never totally comprehended the concepts until i found these videos thanks man you are really helpful keep up the good work..

[dwmaldonado]

this video is amazing! i'm a newbie, started learning JS about 6mo ago and just now, finally, i am seeing how to use a for loop used as a front end solution. originally a designer, but falling in love w/ front end code. so this video really made a lot of senses on how to use JS in real-life. so... thank you.

[uguraydin]

If you've had a problem with your variables returning "null". Put your script at the bottom of the page, below the last tag in the body of the HTML. If you've linked it to an external .js file then put the link at the bottom of the page below the last tag in the body of the HTML. Hope this helps, i had the same problem and was looking to fix it for a couple hours.

[RedEyedJedi]

Dude, that Ctrl+D tip is amazing, as was your whole video. Thank you so much.

[Teofilo]

Amazing video as always, man! By far, the best tutorials on front-end I've seen. I would love to see some more advanced javascript videos, like, your practicle workflow process, design patterns you use, modules, those config objects and init functions... :)

[Limpuls]

Wow, great tutorial series. All other are about fundamentals of javascript only and no further info on how everything you learned apply to web dev. That's exactly what Im experiencing myself at the moment. I went through the whole codecademy course, can build.things like address book or rock scissor paper games, but have no idea how to make my website interactive using JS. Thank you very much, really helpful.

[Jalalrk]

Pls help:

I did the second part for image hide and show with same names and elements, but at event listener it gave me this message (Uncaught TypeError: Cannot read property 'addEventListener' of null).

Thank you

[SogMosee]

two questions about your sublime setup:
1. what color scheme are you using?
2. how do you make var and function keywords italic?

[adamdag]

OMG, just amazing. I was so struggling with this particular subject - and guess what, now everything is clear. thank YOU so much!!! you are the real true not only Programmer also MEGA teacher too. Ah man just brilliant

[Kodeispoetry]

For loop very smartly used here. You are a very good teacher. please create more videos on events and JS topics. Sending you Good Karma.