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/xGXXeo?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.

code source

  • What is the different between === == and =?

    View Comment
  • Very nice and DRY :p Thanks!

    View Comment
  • please make from zero to hero javascript course the way you explain is soooooooooooooo awesome man

    View Comment
  • What sublime color theme are you using? Or is that just how it looked at the time? My attributes are white instead of green.

    View Comment
  • Thank you vary much!

    View Comment
  • Is the HTML file used in this lecture available on Github or some other download location?

    View Comment
  • Seriously… I've been through a number of the top javascript books and countless video tutorials, and your method of teaching is by far the most intelligible that I've found.

    Countless thanks.

    View Comment
  • Hi LearnCode.academy , your code is very usefull, but I'm implementing this code in my web but i have a lot of images, so in the part of you code in java script var allImages = document.querySelectorAll("img"); so disapear all my images, can you help me please?

    View Comment
  • This many tutorials in… I'm pretty sure you are my best friend now.

    View Comment
  • loving all the videos you have made for beginners like me. >.< but i do have a question about. the "for loop". i know you have talked about the loop in your previous video. but i am still a little confuse. about the part.

    why did you add
    " i < allimages.length" ? can i just type. "allimages" instead?

    Additionally, correct me if i am wrong. You typed.

    allimages[i].className = "hide"

    because you are giving a command where all the images you add from now on and before will have the className "hide"?

    once again. thank you sooo much for your videos. :)
    Cheers!

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

    View Comment
  • In this video you used multiple id's.. I thought you were only able to use one id? Is Javascript different?

    View Comment
  • you speak very fast, and you do all things… like hoch poch.

    View Comment
  • Can you help me ? Who is this font? tnx :)

    View Comment
  • So how do you make it when you want for example that the first image is already shown when opening the page?

    View Comment
  • Thanks a lot….. Could i get more Javascript Video…… I like the way u r explaining…..& i m keen to learn :)…..
    One more suggestion for this video….
    function add(){
    var set1 = Number(inputVal1.value);
    var set2 = Number(inputVal2.value);

    if(isNaN(set1 && set2)){
    resultInput.innerHTML = "error…. Put number only";
    } else {
    resultInput.innerHTML = "your sum is " + (set1 + set2);
    }
    }
    with this function if user tried to type strings it will show them errors….

    View Comment
  • 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.

    View Comment
  • Great videos!! I can't this one to work though. At least not without having the script in the html document. Tried to have the codes in an events.js document and then point to it from the the html document with: <script src="scripts/events.js"></script/> but it didn't work. Anyone has an idea what is wrong?

    View Comment
  • can you use an if else statement instead of || ?

    View Comment
  • can u give me some tip how to remember everything or if it's possible how to write everything in my note-book?

    View Comment
  • I GOT IT

    View Comment
  • Have been trying all afternoon to get around this but I keep receiving "Uncaught TypeError: Cannot read property 'className' of null" in my log. Any suggestions?

    View Comment
  • Why parseFloat and not parseInt? What are the differences?

    View Comment
  • Hey there, I was wondering why is it that even when I have copied your code exactly as you have posted in CodePen for the picture example, my webpage still didn't work as expected from your tutorial? All the images just showed up the moment the page loads up, even before any clicks on the links are done.

    Would appreciate it if you may enlighten me on this matter, thanks!

    View Comment
  • What is the name of the color scheme you are using? :) Moreover, rly nice tutorial! :)

    View Comment
  • do i have to learn all this or can i skip to jquery?

    View Comment
  • at the end, i also wanted to hide every image on my page just like you show me,but it also hided all other images in header and footer…so,how can i separate that,so header and footer stay untouched?

    View Comment
  • 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.

    View Comment
  • I almost stopped watching when you mentioned Ben Carson.

    View Comment
  • Sounds like we are going to work in NSA in the beginning.

    View Comment
  • Great video! Thanks for those awesome videos.

    View Comment
  • Very well explained and a lot of fun doing the exercises. Thanks!

    View Comment
  • Your code look so beautiful.
    What package do you use in atom?

    View Comment
  • Ok I know I am doing something wrong. And I think it is probably a setting or something. But I can't get the javascript working. It offcourse shows what is on the html file. But it won't show the javascript result. I'm using dreamweaver and Chrome (my settings for JS are on). Who can help me?

    View Comment
  • What is the name of the color scheme you use for Sublime? I find this one very pleasing to the eye, but I can't find it on the net.

    View Comment
  • comment.addEventListener("noticed", function() {
    alert("Thank you!");
    });

    View Comment
  • awesome tutorial
    thank you

    View Comment
  • man your awesome and a god send!!

    View Comment
  • Hey Will, this stuff helped me out immensely! You blew Codecademy STRAIGHT out of the water with just your first few videos, and I love you for it. Here, I'd like to share this little piece of code with you and everyone else:

    http://jsfiddle.net/kkd213q3/

    In this section of script, I do the same thing you did but automate it, making it so that regardless of how many objects there are, it should still work properly. What it does is build an array of all elements with the class "btn-specialest" (so special), then assign each index of that array its own variable, then add an event listener to each one. Finally, at the end, upon the element being clicked, it takes the innerHTML and transfers it over to a different element (in this case, it just says "You clicked <x>!")

    View Comment
  • At 8:14 how do you turn off/on the HTML in sublime?

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

    View Comment
  • 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..

    View Comment
  • i dont get it, ive checked all of my code, but my javascript just wont work on my browser, nothing happens when i click on the links, i even tried copying and pasting all of your code and then trying again and still nothing happened, please help!

    View Comment
  • What happens in case you want to click again in order to hide the image you just openned.But you dont want another one to be oppened instead?(Toggle things )

    View Comment
  • When I grow up I want to be a ninja like you. LOLs.

    View Comment
  • I hope you were joking when you said Ben Carson is a great guy.

    View Comment
  • i had big problem with explanation about pictures… and only because i didn't realize that in codepen is also .css file.

    View Comment
  • I need a reality check: Am I the only one that has to go through these lessons several times to grasp them?

    View Comment
  • i don't get this one

    <!Doctypehtml>
    <html>
    <title>new html</title>
    <head>
    </head>
    <body>
    <body>
    <script src="new.js">
    </script>

    <input id="think">+<input id="write">
    <p id="output"></p>
    </body>
    </html>

    _______________________________________________
    javascrpit

    var number = document.getElementById("think");
    var number2 = document.getElementById("write");
    var out = document.getElementById("output");
    number.addEventListener("input", sol);
    number2.addEventListener("input", sol);
    function sol(){
    var one = parseint(number.value);
    var two = parseint(number2.value);

    out.innerHTML = one+two;
    }

    View Comment
  • how do i make it that i make a calculator and then he copys the answer

    View Comment