The DOM Event Model

Handling Events

With dozens of different events constantly firing and moving up and down the document tree, the real trick to using event handlers is in figuring out what event to catch, where to attach the handler and how to process it.

Sometimes the answers are obvious and sometimes they aren't. To demonstrate, let's look at a particular effect and see how to implement it using event handlers.

Example Using Mouse Events

Suppose you wanted to create a pop up menu like the one at right. It consists of a DIV tag with several A tags for the individual items. CSS styles are used to achieve the look including a hover effect on the item links.

The hover effect could have been done using events but why complicate matters when the CSS :hover pseudo-class does the job? Besides, we'll be using events to handle the hiding and showing of the menu.

Here's what the CSS and HTML code look like:

.menu {
  background-color: #40a0c0;
  border-color: #80e0ff #006080 #006080 #80e0ff;
  border-style: solid;
  border-width: 2px;
  position: absolute;
  left: 0px;
  top: 0px;
  visibility: hidden;
}

a.menuItem {
  color: #ffffff;
  cursor: default;
  display: block;
  font-family: MS Sans Serif, Arial, Tahoma,sans-serif;
  font-size: 8pt;
  font-weight: bold;
  padding: 2px 12px 2px 8px;
  text-decoration: none;
}

a.menuItem:hover {
  background-color: #004060;
  color: #ffff00;
}

...

<div id="menuId" class="menu">
<a class="menuItem" href="blank.html">Menu Item 1</a>
<a class="menuItem" href="blank.html">Menu Item 2</a>
<a class="menuItem" href="blank.html">Menu Item 3</a>
<a class="menuItem" href="blank.html">Menu Item 4</a>
<a class="menuItem" href="blank.html">Menu Item 5</a>
</div>

Say we want to make the menu appear at the cursor when the user clicks on a particular link. We set up a function called openMenu() and add an onclick handler on the A tag like this:

<a href=""
   onclick="openMenu(event, 'menuId'");return false;">Open Menu</a>

Notice that openMenu() expects two arguments, an Event object and the ID of the menu DIV to display. Remember that the string value of the ONCLICK attribute is actually used to create an anonymous function which, in this case, would look something like this,

function anonymous(event) {
  openMenu(event, 'menuId');
  return false;
}

with the menu DIV id hard-coded. So the handler really has only one argument, event, as all event handlers do. Returning false will prevent the browser default action of following the link.

Here's the openMenu() function itself:

function openMenu(event, id) {

  var el, x, y;

  el = document.getElementById(id);
  if (window.event) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  x -= 2; y -= 2;
  el.style.left = x + "px";
  el.style.top  = y + "px";
  el.style.visibility = "visible";
}

It basically just positions the menu DIV under the cursor and makes it visible. The positioning is complicated a bit by the fact that different methods are needed to determine the cursor position based on the browser.

Next, we want the menu to disappear when the user moves the mouse off the menu. This is done by assigning an event handler to the menu DIV to call the function closeMenu().

document.getElementById("menuId").onmouseout = closeMenu;

function closeMenu(event) {

  this.style.visibility = "hidden";
}

All the function does is reset the menu DIV's visibility style back to hidden.

Now let's try it out, using the link below.

Open Menu

The first thing you'll notice is that the menu disappears as soon as you move the mouse, even if you try to keep the pointer within the menu DIV. Why?

Prev | Next