JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

}
alert("Got a click: " + e);
// IE5&6 will show an undefined in alert since they are not DOM2
document.getElementById("myElement").onclick = handleClick;
//-->>
Notice in this example how the handler accepts an argument. DOM2 browsers pass an Event
object containing extra information about the event to handlers. The name of the argument is
arbitrary, but ―event,‖ ―e,‖ and ―evt‖ are most commonly used. We‘ll discuss the Event object in
more detail in an upcoming section.
DOM2 Event Binding Methods
You can also use the new addEventListener() method introduced by DOM2 to engage an
event handler in a page. There are three reasons you might wish to use this function instead of
directly setting an object‘s event handler property. The first is that it enables you to bind multiple
handlers to an object for the same event. When handlers are bound in this fashion, each
handler is invoked when the specified event occurs, though the order in which they are invoked
is arbitrary. The second reason to use addEventListener() is that it enables you to handle
events during the capture phase (when an event ―trickles down‖ to its target). Event handlers
bound to event handler attributes like onclick and onsubmit are only invoked during the
bubbling phase. The third reason is that this method enables you to bind handlers to text
nodes, an impossible task prior to DOM2.
The syntax of the addEventListener() method is as follows:
object.addEventListener(“event“, handler, capturePhase);
object is the node to which the listener is to be bound.
"event" is a string indicating the event it is to listen for.
handler is the function that should be invoked when the event occurs.
capturePhase is a Boolean indicating whether the handler should be invoked during the
capture phase (true) or bubbling phase (false).
For example, to register a function changeColor() as the capture-phase mouseover handler for
a paragraph with id of myText you might write
document.getElementById('myText').addEventListener("mouseover",
changeColor, true);
To add a bubble phase handler swapImage():
document.getElementById('myText').addEventListener("mouseover",
swapImage, false);
Handlers are removed using removeEventListener() with the same arguments as given when
the event was added. So to remove the first handler in the previous example (but keep the
second) you would invoke