javascript

Cross - Browser Event Object
Chapter 12: Events
Although the event objects for the DOM and IE are different, there are enough similarities to allow
cross - browser solutions. All of the information and capabilities of the IE event object are present in the
DOM object, just in a different form. These parallels enable an easy mapping from one event model to
the other. The EventUtil object described earlier can be augmented with methods that equalize the
differences:
var EventUtil = {
};
addHandler: function(element, type, handler){
//code removed for printing
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//code removed for printing
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
There are four new methods added to EventUtil in this code. The first is getEvent() , which returns a
reference to the event object. Since the location of the event object differs in IE this method can be used
to retrieve the event object regardless of the event handler assignment approach used. To use this
method, you must assume that the event object is passed into the event handler and pass in that variable
to the method. Here is an example:
btn.onclick = function(event){
event = EventUtil.getEvent(event);
};
381