Practical Use of JavaScript Event Bubbling
Universal Event Handler To Handle Common Tasks

Suppose we have a set of user interface objects and would like to show a tooltip when the mouse is over these objects. In the example below, a tooltip will be displayed when you move into one of the buttons. The first three buttons are of a common CSS class.

When you mouse over one of the button, you will see a tooltip being displayed. This contrived example is for demonstration purpose only since it is unlikely that someone will place the same button three times in one row. In real applications, these button could be on different pages or on different page positions.

<img class="help" src="images/help.jpg"/>
<img class="help" src="images/help.jpg"/>
<img class="help" src="images/help.jpg"/>
<img class="apple" src="images/apple.jpg"/>
<img class="noEventCapture" 
  onmousemove="javascript:showPopup(event, 'linkPopup', 
  'This is an umbrella UI');" 
  src="images/umbrella.jpg"/>
Below is a function that draws a mouse over when the mouse is over the buttons. You see that the only last button has a specific onmousemove event override. All of the other buttons will call handleTooltip() function below and display tooltips when you mouse over them.
function handleTooltip(myEvent, eventName)
{
  if (!myEvent)
    myEvent=window.event;
  if (!myEvent)
    return;
  var firingElement=null;


  // Find out which element fires the event.  Firefox and IE store the element
// differently. // Internet Explorer if (myEvent.srcElement && myEvent.srcElement.parentNode) { firingElement=myEvent.srcElement; } // Netscape and Firefox else if (myEvent.target && myEvent.target.parentNode) { firingElement=myEvent.target; } // Now decide what to do based on the className of the element if (firingElement.className=="help") { showPopup(myEvent, "linkPopup", "This is a tooltip example with long text."); } else if (firingElement.className=="apple") { showPopup(myEvent, "linkPopup", "Click here to buy."); } else if (firingElement.className!="noEventCapture") hidePopup("linkPopup"); // Fire the original event handler. if (firingElement.originalEventHandler &&
firingElement.originalEventHandler["onmousemove"]) firingElement.originalEventHandler["onmousemove"](); return true; }

The event capturing is registered with propagateEventHandler() -- see previous page-- with a single call like below. (placed on the bottom of the page so the all elements are elready on the page when the function is called).

propagateEventHandler(document.body, "onmousemove", handleTooltip);

The benefit is the ability to have a centalized and reusable code, which can be stored in one .js file and used on multiple pages and still avoids cluterring the html page with event overrides.

The handleTooltip() function checks for the className but you can check by id or name, too. If the className is "help" then it displays the tooltip for that button. If it is "apple" then it displays the tooltip for that type of button. You can also delegate different "class" to another functions which makes the code more modular. The last button meanwhile has it's own event handler, just to demonstrate that you can combine this methods with existing code if you want.

Stopping The Default Event Handler

Another example below disables the right click context menu. It's not a good idea in general to disable such common interface, but consider this a conceptual example to support something like legitimate custom right click menu which shows different menus, depending on what object is under the click.

In Firefox 2, the disabling can be done as simply as with this code:

function doSomething(myEvent)
{
  return false;
}
window.oncontextmenu=doSomething;

But that code does not work on IE 7. Instead, this method below works on both browsers.

propagateEventHandler(document.body, "oncontextmenu", doSomething);