Home arrow JavaScript arrow Page 4 - 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 - Using the "attachEvent()" method: a simple drop-down menu in IE
(Page 4 of 4 )

 

In an attempt to show how the proprietary "attachEvent()" method works for IE, letís set up a simple drop down menu. To begin with, hereís the JavaScript function to be executed:

 

<script language="javascript">

buildMenu=function(){

    var menu=document.getElementById('menu');

    if(!menu){return;}

    var menuitem=document.getElementById('menuitem');

    if(!menuitem){return;}

    hideMenu=function(){

          menuitem.style.display='none';

    }

    showMenu=function(){

          menuitem.style.display='block';

    }

    menu.attachEvent('onmouseover',showMenu);

    menu.attachEvent('onmouseout',hideMenu);

}

window.attachEvent('onload',buildMenu);

</script>

 

And here are the CSS declarations that weíve tied to the HTML code:

 

<style type="text/css">

#menu {

    position: absolute;

    top: 20px;

    left: 20px;

    padding: 0px;

    width: 150px;

    background: #36c;

    border: 1px solid #000;

    font: bold 11px "Verdana", Arial, Helvetica, sans-serif;

    color: #fff;

    padding: 1px;

}

.menuitem {

    display: none;

    background: #9cf;

    padding: 4px;

    border-top: 1px solid #000;

}

a:link,a:visited {

    display: block;

}

a:hover {

    color: #f00;

}

</style>

 

Finally, hereís the complete listing for the HTML markup:

 

<div id="menu">Resources

<div class="menuitem" id="menuitem">

<a href="http://www.devshed.com" title="Open source articles">Open Source</a>

<a href="http://www.devarticles.com" title="Web development articles">Web Development</a>

<a href="http://www.google.com" title="Find what you are looking for!">Google it!</a>

</div>

</div>

 

Looking at the example listed above, we can clearly see that the drop-down menu is really simplistic. Letís dissect the code, to understand whatís happening. In our CSS declarations, we defined a "menu" contextual selector that references the menu general container. The element is absolutely positioned and styled by applying font typefaces, colors, and so forth. Then, we declared the "menuitem" class for styling menu items. Finally, we set up to display the menu links as block-level elements. Nothing unexpected, right?

 

As part of the HTML, two <div> elements have been defined, the first one being the menu container, and the second the containing element for menu items. Now, itís time to take a look at the JavaScript "buildMenu()" function. Its logic relies on grabbing the proper menu and menu items elements for manipulating them in the following sequence: when the mouse is over the menu container, it fires up the function that displays menu items, setting its "display" property to "block". During the opposite stage, when the mouse is outside the menu container, menu items are hidden from view, resetting the displayís property value to "none".

 

For both stages, we used the "attachEvent()" method to tie the "onmouseover" and "onmouseout" event handlers to the menu element, and execute each required specific function. Here, we have a situation where two different functions have been attached to the same object. Finally, we tie the "buildMenu()" function to a window object for being executed when the page is loaded.

 

Certainly the sample is easy to grasp. However, not surprisingly, the major drawback with this approach is that it only works for IE. The code might be easily changed into a nearly cross-browser version by replacing the calls to the "attachEvent()" method, with the standard "onmouseover" and "onmouseout" expressions, and substituting the final call to the "onload" event handler with a "window.onload=buildMenu" statement. I will leave that to you as a little homework. After all, working with event handlers is such a fun experience, isnít it?

 

Summary

 

Thatís all for now. Weíve deeply explained the main methods available in the major browsers for manipulating event handlers, as well as shown some simple cases, in order to illustrate a practical usage for them. In the last part of this series, weíll be focusing our attention on the DOM "event" object, looking at its numerous properties and methods, and hopefully providing a handy reference for fast and easy implementation in Web projects. Until then, stay tuned.  


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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