DOM2 Events - Example

The below areas all have 'onclick' events attached to them which activate alert popups that contain information about the events. Events on nested areas will bubble up to the containing areas and trigger their 'onclick' event handlers as well (so that a click on the innermost area will result in 3 alert boxes). The onclick event listener for the largest area ('e1') is actually set to capture events so will execute before event listeners on the event target in Mozilla. In IE, event capturing won't work so the e1 event handler will execute during the bubbling phase instead and will always execute last. This example will only work in IE5+, NS6+, and Mozilla.

View the source of this page.

More about this script

Related to this script

Licensing

This script is released under a Creative Commons License.