Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 5 ■ presentatiOn anD BehaviOr (Css anD event hanDling)
The function uses one more parameter than addEventListener(), which is the element itself. It tests whether
addEventListener() is supported and simply returns true when it is able to attach the event in the W3C-compliant way.
Otherwise, it checks whether attachEvent() is supported (effectively meaning IE 8 or below is used) and tries to
attach the event that way. Notice that attachEvent() does need the on prefix for the event. For browsers that support
neither addEventListener() nor attachEvent(), like an extremely old browser, the function points the DOM-1
property to the function.
■ Note there is an ongoing discussion about how addEvent() can be improved—for example, to support retaining the
option to send the current element as a parameter via this—and many clever solutions have been developed so far. Because
each solution has different drawbacks, i won’t go into details here, but if you are interested, check the comments at the
addEvent() recoding contest page at http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html.
Because IE uses a global event, you cannot rely on the event object being sent to your listeners. Instead, you
need to write a different function to get the element that was activated. Matters get confused even further because the
properties of window.event are slightly different from the ones of the W3C event object:
• In Internet Explorer, target is replaced by srcElement.
• button returns different values. In the W3C model, 0 is the left button, 1 is the middle, and
2 is the right; however, IE returns 1 for the left button, 2 for the right, and 4 for the middle. It
also returns 3 when the left and right buttons are pressed together, and it returns 7 for all three
buttons pressed together.
To accommodate these changes, you can use this function:
function getTarget(e){
var target;
if(window.event){
target = window.event.srcElement;
} else if (e){
target = e.target;
} else {
target = null ;
}
return target;
}
Or more briefly, using the ternary operator:
getTarget:function(e){
var target = window.event ? window.event.srcElement :
e ? e.target : null;
if (!target){return false;}
return target;
}
138
www.it-ebooks.info