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:
– addition: http://codepen.io/anon/pen/vOeeqG?editors=101
– pic link: http://codepen.io/anon/pen/vxYxKN?editors=101

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

See list of all javascript events here: https://developer.mozilla.org/en-US/docs/Web/Events

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.

Comments

Justin chan says:

Oh, just watch tutorial video offline, so forget to consult to source code. A little bit confused.
I need to watch it over and over again. :) thanks

Juan Zamora says:

Even for android please
Example touchmove, touchatart.
Please

Saurav Aggarwal says:

i got the complete video….all your tutorials are awesome…!!
i am just having problem with linking script files…help…!!

2is Toomuch says:

This video is helpful

Ashington06 says:

1500th like! Great tutorial.

Hanzala Jamash says:

I was messing around with my script and wandering why it doesnt work, finally realized that I didnt linked it with HTML
Love your vids

cheska cruz says:

17:30, got one question, in the for loop you said that *ALL IMAGES* will have a class of hide, but what if you just want to target, for example 3 images in your html, to have a class of hide, how will you do this?

Michael says:

How do you make the events.js file run constantly? when I put it at the top of the body it runs once and won’t allow for button events for happen.

Giselle Jimenez says:

Awesome tutorials. Thanks for the help!

Shahab Khan says:

Best to learn basics of events….

Censoredsmile says:

I thought when you put something in between quotes, it is just a word. But in this video, when it says things like mouseenter and mouseleave, they are like commands. Why?

Emmanuel Ruiz says:

it does’t work with local source images like src=”img/pic1.jpg”

suraj sri says:

hey can u elaborate on data-img…..plz……btw great work……its fun learning……but data-img

Abul Monsur Mannan says:

Hi LearnCode.academy/ anyone here,
Do you know why we need to use allImages to hide in the JS though css hide the images beforehand?

Syed Najam Abbas Naqvi says:

got a problem cannot-read-property-addeventlistener-of-null even i copy your code.

Razvan Zamfir says:

Great tutorial, man! One question: why do you first bind the functions to events and THEN define the functions? I have seen this is common practice, but WHY? Thank you!

Sushant Kulkarni says:

For some reason, my code isn’t working. Can you help me out here:
//index.html file
< !DOCTYPE html>


Javascript Stuff

Addition of Numbers

+



//events.js file
var numTwo=document.getElementById(“numone”);
var numOne=document.getElementById(“numtwo”);
var addSum=document.getElementById(“addsum”);

numOne.addEventListener(“input”,add);
numTwo.addEventListener(“input”,add);

function add(){
var one = parseFloat(numOne.value)||0;
var two = parse(numTwo.value)||0;
addSum.innerHTML=”your sum is: ” + (one+two);
}

Vino Vinoth says:

really very helpful thank u :)

shashank sharma says:

Thanks a lot from India..

Jalal rk says:

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

sagar kaushal says:

which event are basic events and which events are standard event please reply fast and tell me the difference tooo

Frank Watt says:

This is an excellent video but I seem to have a problem with the HTML. I didn’t get more than a glimpse at the code used. Mine nearly works except that this section of code is rendered in the browser:

class=”hide” id=”simon-pic” src=”http://upload.
wikimedia.org/wikipedia/commons/a/aa/
Simon_Cowell_in_December_2011.jpg”
class=”hide” id=”bruce-pic” src=”http://upload.
wikimedia.org/wikipedia/commons/0/00/
Bruce_Willis_by_Gage_Skidmore.jpg”
class=”hide” id=”ben-pic” src=”https://
carsonscholars.org/files/imce/bccurrent.jpg” alt=””

(except that the tags don’t appear.)

That didn’t bother me much except that what was causing that seems to have prevented me from getting past 15:56. I can console.log(picId) correctly but I get
“Uncaught TypeError: Cannot read property ‘className’ of null
at HTMLAnchorElement.picLink” at the line:
var pic = document.getElementById(picId);

Is this because of the HTML inadequacies?

0the0ambient0 says:

Excellent tutorial. Thank you

Lyrics Lord says:

How to make a bar line???

Danny Brown says:

When you learn more in a couple videos than you did in 3 years of Uni 😐

xviewmytubex says:

Total noob question here about the DOM. What exactly does document.getElementById() mean? Code in an external JS file like:
var x = 10;
document.getElementById(“p1”).inner HTML = x; (and the p element containing the ID in the HTML) doesn’t technically have anything to do with the p element, right? I mean, the JS is external code and is just about a variable definition. Is the fact of displaying the variables value on the web page the only reason for why this method is required? There is other JS code that is going to display, output something to the web page, and doesn’t require this obeject.method. I find myself writing some functions in external JS files and I can’t get them to work until I define an ID in the HTML and pass it into this object.method. Is this used only for any kind of scripting that will do something on/to the web page, or is there another purpose/meaning in using this object.method? Thank you. =)

SogMosee says:

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

Asma Liaquat says:

kindly help me….
Uncaught TypeError: Cannot read property ‘addEventListener’ of null
what is the solution for this error other than adding script at end of page as i already did that and still having this error :'(

Moe Diakite says:

how do i access you’re jquery tutorial?

aldo reva says:

damn this is complicated

Chloe Kimball says:

You are amazing sir. i know what I will be doing in my summer break. Learning java script from you!

Blake Kofi says:

Your tutorials are great!

Hadeel Sh says:

i dont understand what does it do??
pic.className = “”;

Kimse says:

didnt work for me

Bradata Braca says:

I watched all the videos up to here and I still don’t get how to make the exact same look of a web page like you did … I get it that the point here is to teach us how js works to user input, but how can I perform that if I don’t know how to make it look like that

aman jain says:

can i use href instead of data-img? like href=”#simon-pic” and id of img as img=”simon-pic”?

SuperKikiii says:

is it sublime text in the video ? What theme is that ? I want it!

TavakTV says:

I know this is not about this video but what color scheme are you using?? You *MUST* reply, please!

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours