Professional JavaScript For Web Developers

Chapter 9
As previously stated, this method can be used to attach more than one event handler:
var fnClick1 = function () {
alert(“Clicked!”);
};
var fnClick2 = function () {
alert(“Also clicked! “);
};
var oDiv = document.getElementById(“div”);
oDiv.attachEvent(“onclick”, fnClick1);
oDiv.attachEvent(“onclick”, fnClick2);
This code segment causes two alerts to be displayed when you click the element. The first is
“Clicked!”, followed by “Also clicked!”. The event handlers always execute in the order in which
they are added.
You can also use the traditional JavaScript method of assigning event handlers:
var fnClick1 = function () {
alert(“Clicked!”);
};
var fnClick2 = function () {
alert(“Also clicked! “);
};
var oDiv = document.getElementById(“div”);
oDiv.onclick = fnClick1;
oDiv.attachEvent(“onclick”, fnClick2);
This code is exactly equal to the previous example, and the alerts are displayed in the same order.
Assigning an event handler in the traditional way is considered just another call to attachEvent(),
so the event handlers are still executed in the order in which they are defined.
DOM
268
The DOM methods addEventListener() and removeEventListener() accomplish the assignment
and removal of event handlers. These methods, unlike IE, take three parameters: the event name, the
function to assign, and whether the handler should be used for the bubbling or capture phase. If the handler
is to be used in the capture phase, the third parameter is true; for the bubbling phase, it is false.
Here’s the general syntax:
[Object].addEventListener(“name_of_event”, fnHandler, bCapture);
[Object].removeEventListener(“name_of_event”, fnHandler, bCapture);
To use these methods, you must first get a reference to the object in question and then assign or remove
the event handlers:
var fnClick = function () {
alert(“Clicked!”);
};