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.
Original source
22 responses to “Javascript Events Tutorial – How Web Developers Respond to User Input”
hey can u elaborate on data-img…..plz……btw great work……its fun learning……but data-img
damn this is complicated
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
hi i dont even know how for loop hide the existing images on the browser , can someone help me?
how do i access you're jquery tutorial?
really very helpful thank u 🙂
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
Hiding and expanding images (toggling visibility) @10:00 was very helpful
got a problem cannot-read-property-addeventlistener-of-null even i copy your code.
Thanks alot, Bro i really gotta say this but your explanations is precisely on point. I really want to learn even more.
i have written something else :
function show (person,picture){
person.addEventListener("click", function(){
if(picture.className=="hide"){
picture.className="";
}else{
picture.className="hide";
}
});
}
show(simon,simonPic);
show(bruce,brucePic);
what do u guys think about it?
You can delete code from 18 to 22 row and just use row #19. There's no need to check a class name if you earlier set it. Class name will be "hide" in all cases.
I've been using HTML & CSS for ages but was too scared to use javascript – not anymore thanks to you, your videos are really fun and you explain things really well. I was getting an error around 6:00 in though – Uncaught ReferenceError: parseFLoat is not defined
at HTMLInputElement.add (test.js:138). Is this because I need to define parseFloat elsewhere? I just thought it was a JS keyword and was standard :/ because you didn't have to define it did you. Btw, I totally agree with a comment I read, you do sound like Jason Bateman a little! That's proper cool haha
what package theme do you use for this sublime layout?
Thanks for the tutorial. One question, does the data-img have to be the same as the img id?
loop hole report! the images dont hide when you re-click them…,i am proud to announce i found a solution for this..,
add
if (allImages[i].className=='') {
break;}
in the for loop. Or dont no one really cares.
what theme u used?
12:24 how do you do that?
This is better
var Sum = (parseFloat(numOne.value) || 0) + (parseFloat(numTwo.value) || 0);
the "Double Click to hide" function doesn't work if you hide every image each time
numOne.addEventListener('click', function(){
console.log('Hi');
})
Result: Uncaught TypeError: Cannot read property 'addEventListener' of null
Which package are you using for commenting and de-commenting the HTML code?