Home arrow JavaScript arrow Page 2 - 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 NS6 and Mozilla
(Page 2 of 4 )

 

In order to fully exploit the features presented with the event capture and event bubble schemas, the DOM introduced the handy concept of "event-listeners." As the name suggests, they provide developers with a useful way to attach an event to an object and specify how that event must be manipulated. As you probably know, there are several browser incompatibilities that come up relative to these topics.

 

While they are far from being perfect, NS6+ and Mozilla browsers have implemented great support for DOM standards, thus moving in the right direction. They’re sticking pretty well to the W3C DOM event flow, following the event-capture and event bubble phases, revealing two main methods for implementing event-listeners in Web documents. We can put them into action by utilizing the following syntax:

 

addEventListener(event,function,capture)

 

and its counterpart

 

removeEventListener(event,function,capture).

 

 

These methods would be rather useless if we could not tie them to objects. So, these are the prototypes for attaching event handlers to objects:

 

object.addEventListener(event,function,capture)

 

and the opposite

 

object.removeEventListener(event,function,capture).

 

As we can appreciate, both methods accept three parameters, which are described below:

 

Event: references the event that needs to be manipulated, such as "click", "load", "submit" and so on. Please note that the event must be specified without prefixing it with "on", as usually we do with inline event handlers or through JavaScript code.

 

Function: contains the reference call to the function that will be executed for the event specified. So, if the name of the function is, for instance, "validateEmail", this is the correct value to be passed, without the parenthesis. Otherwise, an error will be generated.

 

Capture: contains a Boolean value, that is, "true" or "false". If a value of "true" is specified, the function is executed when the event is detected at the capture phase. Otherwise, if a value of "false" is passed as an argument, the function will be executed when the event is at the bubble phase.

 

As we’ve seen previously, the "addEventListener()" method assigns an event handler to an object, while that "removeEventListener()" obviously removes it from the same object. When we’re removing an event handler, all of the parameters should match those previously specified in its counterpart "addEventListener()". Let’s take a look at the correct implementation for these methods, based on the given example. Here’s the JavaScript code:

 

<script language="javascript">

    alertBox=function(){

          alert('Reacting to Event bubble phase');

    }

    var div=document.getElementById('testdiv');

    div.addEventListener('click',alertBox,false);

</script>

 

And this is the simple HTML markup:

 

<div id="testdiv">

<p><a href="#">Click here activate the alert method</a></p>

</div>

 

When the <div> element is clicked on, the "alertBox()" function is executed at the event bubble phase, since we’ve passed a value of "false" for the capture parameter. Similarly, if we want to dynamically remove the event handler from the previous example, we should write something like this:

 

div.removeEventListener('click',alertBox,false);

 

In addition, we can use "addEventListener()" multiple times, to execute different functions according to several registered events. 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.addEventListener('mouseover',alertBox,false);

    div.addEventListener('mouseout',largeAlertBox,false);

</script>

 

In this case, the first function will be executed when the mouse passes over the <div> element, and the second when the mouse is out of it, respectively. This possibility to register many events for the same object is extremely useful. Certainly, another powerful feature of this method is the ability to register the same event handler for different functions without overriding the referenced functions in the source code. Suppose that we have two functions, which need to be executed when the page is loaded. It’s perfectly valid to write:

 

<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.addEventListener('load',alertBox,false);

window.addEventListener('load',largeAlertBox,false);

 

The above example will execute both functions, displaying the two alert boxes in sequence, without overriding the first function attached to the window object, once the page finishes loading. If we think about it, this is a very useful feature that can be exploited conveniently, in situations where we need to call several functions tied to the same event.

 

Our next step in this guide is to look at the DOM implementation present in IE5+, in order to describe the available methods for assigning event handlers.

 


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