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