JavaScript from Null: Chapter 5 – Events
As we move forward with JavaScript University, today, we’ll learn how to add event handlers to elements on the page. Unfortunately, this can be more cumbersome than we’d hope, due to the fact that Internet Explorer must always be the black sheep. Nevertheless, we’ll learn how to abstract these inconsistencies away to our custom utility function.
As with every JavaScript from Null screencast, it’s not essential that you view the previous entries in the series before watching.
Catch Up
- Chapter 1: Hello World
- Chapter 2: Data Types
- Chapter 3: Conditional Statements
- Chapter 4: Arrays, Functions, and your First Animation
- Chapter 5: Events
In this Screencast, you’ll Learn About:
- Working with .addEventListener
- Working with IE’s .attachEvent
- Differences in the way browsers handle events.
- Capturing phase vs. event bubbling
- Building a utility function to abstract our cross-browser event handling.
Chapter 5: Events
Other Viewing Options
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web. Ready
Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
LivingDesign - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice tutorial Jeff
FYI, in IE8 console.log will work if you have the Developer Tools window open (F12). Strangely enough, it will continue to work (without errors) if you close the Developer Tools window. Sounds like a bug, but it works
Here is a screenshot… http://j.mp/9ktJVK
i think we should change net.tutsplus.com to jeffreyways.tutsplus.com. hot dang boy, you tear this place up!
Great tutorial!
I’m just wondering what happens when you need to pass parameters into the function with the addEventListener since the function that’s being called doesnt get the brackets. If I add the brackets does the function get executed when the document loads?
These tutorials are great, they also give me a greater appreciation for jQuery.
I loved the way DoSomething turned out to be doSomething automagicly!
Nice tutorial thought, thank you!
Thought so too lol. Sneaky bastard.
Nice tutorial ! thank you useful information
Wow !
That’s great !
Thanks !
Great, thanks
I missed this series. Please keep it going!
Thanks
Thank you Jeffrey, you’re awesome! I’m really enjoying these JavaScript from Null screencasts. Keep ‘em coming!
I have the same question as Kyle above. I’ve never got the hang of that…
For a future tutorial I would love to see how to best do DOM-manipulation
in the function addEvent can’t we make it like this for the capture
addEvent(obj, evt, fn, capture=false)so we make a default value for it rather than make it a if statment
Unlike with PHP, you can’t provide default values like that with JavaScript, as far as I know. To provide a default value of an argument, you would do the following:
function test(name) {
if (!name) name = ‘Something’
}
The PHP version of it would be:
function test($name = ‘Something’) {
}
nice tutorial
I just started with the first video (complete javascript noob) and have to say it’s a great way to learn javascript
very nice tute today i came to know about this site
this rocks man
Great tutorial man!
Also, please dont forget to finish the “CodeIgniter From Scratch”-series
thanks for this series.. I am really enjoying and hope you will continue..
Thank you Jeff for keeping this series continue…
Please teach us about .htaccess with your screencast video series…
waiting …
Thanks Jeffrey
Thanks Jeffrey, you taught really good compared to others
Nice Tut, JavaScript can be rather daunting
Yes! Finally, I’ve been waiting for this for what feels like years!
I’m really enjoying this JavaScript from Null screencast series. Keep ‘em coming!
good tut , many thanks and looking forward to more!
Jeffrey, when a new lesson?
Coming soon. Probably next week.
What is Capture? You mentioned in the screencast that you were going to mention more about it, but you never really did.
Actually I just heard it at the very end, but I was a little too hasty.
What is the benefits of this Capturing and Bubbling?
Hey Jeffrey, thanks for this awesome series. I was wondering if you will show us in this series how to create a js plugin and how to integrate it in a html or php if it’s possible. For example in a php register form how to include a password strength plugin.
Oh, and one other thing. I was looking over CodeCanyon and in the JavaScript script section I saw that every file was written in a js library, and then I checked the upload form in JavaScript and I saw that you have to select a js library, so my question is, why can’t you upload files with raw js.
So, if I asked some stupid questions sorry.
Nice tut )
nice
Great tutorials Jeffrey!
Looking forward to the next ones as always
This is a fantastic tutorial, when can we expect the next installment?