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. |
