illion,
The value of this within the handler
It is often desirable to reference the element from which the event handler was fired, such as when using a generic handler for a series of similar elements. When attaching a function using addEventListener() the value of this is changed—note that the value of this is passed to a function from the caller.
In the example above, the value of this within modifyText() when called from the click event is a reference to the table 't'. This is in contrast to the behavior that occurs if the handler is added in the HTML source:
view plainprint?
<table id="t" onclick="modifyText();">
. . .
The value of this within modifyText() when called from the onclick event will be a reference to the global (window) object.
Internet Explorer
In IE you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to:
view plainprint?
if (el.addEventListener){
el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick', modifyText);
}
There is a drawback to attachEvent, the value of this will be a reference to the window object instead of the element on which it was fired.
