javascript

Chapter 12: Events
This rewritten example works as expected because the same function is used for both
addEventListener() and removeEventListener() .
In most cases, event handlers are added to the bubbling phase of the event flow since this offers the
broadest possible cross - browser support. Attaching an event handler in the capture phase is best done if
you need to intercept events before they reach their intended target. If this is not necessary, it ’ s advisable
to avoid event capturing.
DOM Level 2 event handlers are supported in Firefox, Safari, Chrome, and Opera.
Internet Explorer Event Handlers
IE implements methods similar to the DOM called attachEvent() and detachEvent() . These
methods accept the same two arguments: the event handler name and the event handler function. Since
IE only supports event bubbling, event handlers added using attachEvent() are attached on the
bubbling phase.
To add an event handler for the click event on a button using attachEvent() , the following code can
be used:
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
Note that the first argument of attachEvent() is “ onclick ” as opposed to “ click ” in the DOM ’ s
addEventListener() method.
A major difference between using attachEvent() and using the DOM Level 0 approach in IE is the
scope of the event handler. When using DOM Level 0, the event handler runs in the scope of the element
on which it is attached; when using attachEvent() , the event handler runs in the global scope, so this
is equivalent to window . Here is an example:
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(this === window); //true
});
This difference is important to understand when writing cross - browser code.
372