JavaScript from Null: Chapter 5 – Events
The Full Series
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.
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
Join our newsletter!
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
Why was my comment deleted?
Hi Jeff,
It’s a fine intro but you say nothing about why this is better than the inline model which is what everyone had used in the past and many still use. Other than separating behavior and structure for its own sake why should we use this obviously more complicated model instead of just inserting HTML event attributes?
Thanks
Or for that matter why shouldn’t we use this instead, which works fine on everything from IE5 to Chrome
window.onload=function change_color()
{
var anchor=document.getElementById(‘anchor’)
anchor.onmouseover=function (){ document.body.bgColor=”red”}
anchor.onmouseout=function (){ document.body.bgColor=”blue”}
}
Move over me
For some cases, it’s works just fine. But you can’t assign multiple event handlers with that method.
You mean to the same element? Looks to me I can assign as many as I want
window.onload=function addEvents()
{
var anchor=document.getElementById(‘anchor’)
anchor.onmouseover=function (){ document.body.bgColor=”red”}
anchor.onmouseout=function (){ document.body.bgColor=”blue”}
anchor.onclick=function (){ document.body.bgColor=”yellow”}
anchor.ondblclick=function (){ document.body.bgColor=”gray”}
}
Is this somehow wrong?
@cid – Try to add another function to that event handler. Only the latter will execute.
Indeed this doesn’t work:
anchor.onclick =function (){ document.body.bgColor=”red”}
anchor.onclick =function (){ div.style.backgroundColor=”gray” }
but this does
window.onload=function addEvents()
{
var anchor=document.getElementById(‘anchor’)
var div=document.getElementById(‘div’)
anchor.onclick=function(){first();second();}
anchor.ondblclick=function(){first2();second2();}
function first(){ document.body.bgColor=”red”}
function second(){div.style.backgroundColor=”yellow” }
function first2(){ document.body.bgColor=”blue”}
function second2(){div.style.backgroundColor=”gray” }
}
I love this, but it is sooo damn fast, that I can barely understand what I’m doing. I think this is a solid introduction, but will need a legit guide so that I’m not flying quite so blind.
thanks for the tuts, really great.
can someone explain why window.attachEvent replaced by obj.attachEvent.
my question is obj value is var anchor = document.getElementById(‘anchor’),
why anchor can replace window is it same between window and var anchor =
document.getElementById(‘anchor’) still confused. thanks in advance