Home arrow JavaScript arrow Page 3 - Handling events with the DOM, part II
JAVASCRIPT

Handling events with the DOM, part II


In this second article in a three part series, we will delve more deeply into how Netscape, Mozilla, and Internet Explorer manipulate event handlers, and take a look at building a simple drop-down menu.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
April 26, 2005
TABLE OF CONTENTS:
  1. · Handling events with the DOM, part II
  2. · Assigning event handlers in NS6 and Mozilla
  3. · Assigning event handlers in IE5
  4. · Using the "attachEvent()" method: a simple drop-down menu in IE

print this article
SEARCH DEVARTICLES

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, its 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 its 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)

 

Lets 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 were 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 were removing an event handler with the "detachEvent()" method, all of the parameters should match those previously specified in its counterpart "attachEvent()". Lets 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 weve 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, its 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 weve indicated previously, this approach is extremely handy when were 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+.

 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials