Getting Good with JavaScript - Andrew Burgess [36]
// assume the event we wired up above
btn.removeEventListener("click", welcome_user, false);
The method is removeEventListener. The important point is that the three parameters are all the same as the addEventListener parameters; that's how you target which event you're removing.
To remove events with the IE event model, try this:
// assumt the event we wired up above
btn.detachEvent("onclick", welcome_user);
It's pretty simple.
Writing Cross-Browser Event Handlers
The fact that there are two event models means that you need to wire up two event handlers for each event. The easiest way to do that is to write a function that wraps the event behaviour:
function addEvent(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else {
element.attachEvent("on" + type, fn);
}
}
This is an extremely basic form of this function; there are a ton of ways to improve it. As an exercise, try creating a removeEvent function that removes events for both the standard model and the IE model.
Another Short Rabbit-Trail on Script Loading
Remember way back (when you were younger, and had less JavaScript in your blood), I recommended you put script tags at the end of the body, unless (and I quote) you "write your code to wait until the page has completed loading before it begins executing." I'm bringing this up for more than nostalgic reasons: events can help you do this.
What you want to do is listen for the load event on the window object. Here's how that's done (assume we have our addEvent function from above):
Example 5.15
addEvent(window, "load", function () {
alert("do something, for example.");
});
There is a lot more about events that we can't cover here. I didn't even mention the event object that gets passed to the function that is called; this object provides information about the event, such as which element the event from fired on. Check out Appendix A for further resources that will teach you about events.
The DOM, In Sum
As you can see, the DOM is occasionally confusing. You're constantly jumping over text nodes; IE has it's own mind for events and more. And we haven't even talked about AJAX or even mentioned the Browser Object Model (which isn't part of the DOM, but closely related). Does this mean you're doomed to awkwardly code JavaScript for the browser for the rest of your life?
Not really. The answer is to write a library: a collection of functions that do all the heavy, cross-browser work for you. But the great part about this is that there are already several incredible JavaScript libraries out there that can make your work simpler.
What are your options? Well, do any of these JavaScript buzzwords sound familiar?
jQuery
Mootools
YUI
Dojo
And that's only a few of them. These libraries give you a drop-dead simple way to work with the DOM. To whet your appetite, here's a snippet of raw JavaScript, followed by it's jQuery counterpart:
// Raw JavaScript
var leading_p = document.getElementById("content").firstChild;
while (leading_p.nodeType !== 1 || leading_p.nodeName !== 'P') {
leading_p = leading_p.nextSibling;
}
leading_p.style.backgroundColor = "red";
// jQuery
$("#content p:first").css("background-color", "red");
'Nuff said, eh? I think you can see the appeal of a library. All these libraries have great sites with tons of good documentation and tutorials; check them out to learn more!
A warning here: while using a JavaScript framework is much simpler than writing the raw JavaScript, you should really understand how to do things with the raw DOM functionality (which is much more than what we've covered here).
Wrapping Up
Well, That's all we're going to cover in this book. But that's definitely not all there is to learn about JavaScript. While you should now be comfortable writing functions, working with object, and (gently) manipulating the DOM, there's so much more to cover. JavaScript is growing as we speak, and there's a lot more to learn. Check out the Appendices for where to go from here.