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
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
danmoore - 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+ mobiletuts+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.
Do you know what the subject will be for Chapter 6?
Hey Jeffry, your tutorials are truly amazing and we would really love to see more of them. Please please continue this series.
Hanging on a cliff,
Mushon (and tons of other people)
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?
Watched each episode of this series multiple times now. Can’t wait for the next one.
As always, easy to understand, explained very well. It’s awesome.
I’m following this serie with interest.
At the top there is a link to get it in iTunes as a podcast, but I can’t find it in the store.
What happened to this series? The last one was in January.
Congratulation for the amazing series!! Your tutorials are always easy to understand and with a complete explanation!!!
I was wondering… When the next amazing episode?
When is chapter 6 coming?!
So good, thanks Jeff!
What is the point of capture? Does it speed up the script? How does one use it and when?
Great series jeffrey, learned a lot already !
Are there any more or was this the last one of the series ?
Delayed as hell… give us all the chapters pl0x
Nice tutorial Jeff (Y)
That is really great…..
Any one now where I can find next episode??
Hallo Jeff,
thanks a lot for this stuff!!!
are you going to continue with this series?
Hi Jeffrey. Your Screencast rocks so much! Please continue this series I’m going crazy it’s so good !
Great series, I hope you follow this up with more!
Hey Jeffrey awesome tutorials, learning this way for my exams Webscript you really help me out with the good explanation.
I should mention that you should give Aptana Studio a try help alot in js .
works also on mac :p
hope to see you soon with a new episode
Thanks for the tutorials!!! I learn a lot!! I hope you will continue this series. But 7 months without another chapter may say javascript tutorials finished
Please go on with the great tutorials!
Please go back to the series. They are just the best on Internet.
Thanks, Ricardo! I fully plan on it soon.
Thanks Jaffrey for a great series, Hope it wiil be back soon!
Hi Jeff,
great tut as usual, echoing some of the other comments here regards ‘bubbling’, I understand from your explanations what it is but I’m struggling to see why you would or wouldn’t use it, it would be great in the next episode to have a practical example of when it would be good to use it (or not as the case maybe)
Thanks!