Hacks > Event Compatibility Using Dr. JECL

Some browsers, namely Internet Explorer, don't support the standard event registration model. If all goes well, some demos will appear below.

Clicking in this box should result in two alerts: "Alert 1" and "Alert 2"
It simply demonstrates that you can register multiple handlers on one element

div2

div3

Clicking in this box should result in four alerts: "one", "two", "three", "four"
They have been registered in the following way:

Outer div (div2) - capturing
Inner div (div3) - capturing
Inner div (div3) - bubbling
Outer div (div2) - bubbling

This fancy demo changes the colors of the surrounding divs as events are captured and bubbled. Alerts will appear as the event propogates

Additionally, the background color is set to yellow when an event is being handled in the capturing phase and green in the bubbling phase. If it's not doing anything, it's just white.

The function applyEmuToAll adds the functions addEventListener, removeEventHandler, and dispatchEvent to the object you give it. For example:

a = document.getElementById( "div1" );

a = applyEmulation( a );

a.addEventListener( 'click', alert, false )

applyEmulation is nice and doesn't clobber the browser's native version (assuming it exists). applyEmulationForce ignores this and applies emulation anyway.

In addition to providing listening functions, if your handler takes an argument (an event), the following things will be handled

event will be the actual event
event.type - a string describing the event
event.target - the object where the event occurred
event.cur - the object currently being handled
event.pageX,event.pageY - coordinates relative to the top left of the page
event.emulationOn - will be set to true if emualtion is on

Note that event.button is NOT handled

If you think this is useful, you're welcome to download the source and use it. It's licensed under the LGPL

On a side note, the W3C DOM Event Specification provides an excellent explanation of capturing versus bubbling.

Here's the currently known browser compatiblity:

Browser	Platform
Internet Explorer 5.2	Mac OS X	NOT OK
Internet Explorer 6	Windows	OK
Mozilla Firefox	Multiple	OK
Safari	Mac OS X	OK

Compatibility reports, questions, and comments can be sent to Nikolas Coukouma