Handling events with the DOM, part II - Assigning event handlers in IE5
(Page 3 of 4 )
As in many other cases, IE5+ has implemented a proprietary version of the DOM for managing events. In fact, it’s much more simplistic when dealing with event handlers, since it focuses only during the event bubble phase. There is a major drawback with this approach, because it’s very far from the W3C DOM proposed standards. According to IE, there are two main proprietary methods available for assigning event handlers:
attachEvent(eventname,function)
and
detachEvent(eventname,function)
In a similar fashion, methods are annexed to objects in the following manner:
object.attachEvent(eventname,function)
object.detachEvent(eventname,function)
Let’s specify the corresponding parameters for the above methods:
Eventname: references the full event name that must be detected, such as "onclick", "onload", and so forth.
Function: contains the reference call to the function to be executed when the event is bubbled. Once again, a reminder is needed here: at the time that we’re passing the function name, its parenthesis must be removed.
The first "attachEvent()" method assigns an event handler to an object in IE5+, while the second removes it from the object. When we’re removing an event handler with the "detachEvent()" method, all of the parameters should match those previously specified in its counterpart "attachEvent()". Let’s illustrate some examples, to properly understand how they are implemented:
<script language="javascript">
alertBox=function(){
alert('Reacting to Event bubble phase');
}
div=document.getElementById('testdiv');
div.attachEvent('onclick',alertBox);
</script>
And the HTML markup should be written like this:
<div id="testdiv">
<p><a href="#">Click here activate the alert method</a></p>
</div>
If we need to dynamically remove the event handler, all we need to do is call the "detachEvent()" method in the following manner:
div.detachEvent('onclick',alertBox);
Please note that we’ve used the same parameters originally passed to "attachEvent()" to remove the event itself from the object.
Analogously, we can call the "attachEvent()" method multiple times, assigning many event handlers to the same object and executing different functions. For instance:
<script language="javascript">
alertBox=function(){
alert('Reacting to Event bubble phase');
}
largeAlertBox=function(){
alert('Reacting to Event bubble phase\nReacting to Event bubble phase\nReacting to Event bubble phase');
}
var div=document.getElementById('testdiv');
div.attachEvent('onmouseover',alertBox);
div.attachEvent('onmouseout',largeAlertBox);
</script>
In the previous example, both functions will be executed in sequence, first when the mouse is over the <div> element, and second when the mouse is positioned outside. Finally, as we explained for the "addEventListener()" method, it’s feasible to call different functions responding to the same event, without removing any functions from execution. Utilizing the previous example, the code would look like this:
<script language="javascript">
alertBox=function(){
alert('Reacting to Event bubble phase');
}
largeAlertBox=function(){
alert('Reacting to Event bubble phase\nReacting to Event bubble phase\nReacting to Event bubble phase');
}
window.attachEvent('onload',alertBox);
window.attachEvent('onload',largeAlertBox);
</script>
Since IE sticks to the event bubble model, when the page is loaded, the two functions will be executed in the following order: first, "largeAlertBox()" and then, "alertBox()", without overriding each other. As we’ve indicated previously, this approach is extremely handy when we’re dealing with multiple scripts that need to be registered to the same event handler.
As was mentioned some time ago, browser incompatibilities still run deep in the area of event handling. Still, there are some workarounds to deal with these inconsistencies. Most of the time, this involves writing a function that takes care of handling internally the methods above described, according to the DOM version implemented. In this way, we can manage to create something close to a cross-browser solution.
In next section, we get practical, presenting a simple drop-down menu example as part of the learning process for handling event handlers in IE5+.
Next: Using the "attachEvent()" method: a simple drop-down menu in IE >>
More JavaScript Articles
More By Alejandro Gervasio
