I prepared a little example of the various event registration models, event properties and event orders. Thus you can get a quick overview of the possibilities and restrictions of event handling.
On this page I give some quick event compatibility tables.
This page is meant for a fast overview of the most common event properties. If you want to study the complete list, see the W3C DOM Compatibility - Events page.
The data on this page come from testing Netscape 4.74 and 6.2, Explorer 4, 5, 5.5 and 6 on Windows,
Explorer 4.5 and 5.1 on Mac, Opera 5 and 6, Konqueror 2.2.2, Safari 1.0 beta (v48) and iCab Preview 2.7.1.
I treat Safari and Konqueror as one browser, until it's proven that they behave
differently.
Action | Model | Page | Compatibility | Remarks | ||||
---|---|---|---|---|---|---|---|---|
IE | NS | Safari | Op | iCab | ||||
Event registration models How do I add event handlers to an HTML element? |
Inline: <A HREF="somewhere.html" onClick="doSomething()"> |
Early event handlers | Yes, even in Version 2 and 3 browsers | Completely cross-browser compatible, so I advise you to use one of these models. | Traditional: element.onclick = doSomething |
Traditional model | Yes | |
W3C: element.addEventListener ('click',doSomething,true | false) |
Advanced models See also the Event order page |
No | 6 | Yes | 7 | No | The most advanced model, unfortunately too little supported. | |
Microsoft: element.attachEvent ('onclick',doSomething) |
5+ Win | No | No | Strongly deprecated | ||||
Event accessing models How do I access the event when I want to obtain more information? |
W3C/Netscape: function doSomething(e) {code} e contains the event |
Event accessing | No | Yes | Yes | Support detection necessary. | ||
Microsoft: Through window.event |
Yes | No | ||||||
Event orders If an element and one of its ancestors have an event handler for the same event, which one should fire first? |
Event capturing The event is handled first by the element highest in the document tree, then is passed downwards. |
Event order | No | Yes | 7 | No | Netscape 4 supports only event capturing. In the other browsers use of the W3C model is required for capturing | |
Event bubbling The event is handled first by the element lowest in the document tree, then is passed upwards. |
Yes | 6 | Yes | Default event order in all browsers but Netscape 4. | ||||
Action | Model | Page | IE | NS | Safari | Op | iCab | Remarks |
Compatibility |
Question | Property | Page | Compatibility | Remarks | ||||
---|---|---|---|---|---|---|---|---|
IE | NS | Safari | Op | iCab | ||||
What is the type of the event? | type | Event properties | Yes | Incredible but true: this property works correctly in all browsers! | ||||
Which HTML element is the target of the event? | target | Event properties | Mac | Yes | Although the event may bubble upwards, the target/ srcElement remains
the actual element the event took place on. Bug IE5Mac: when the event bubbles upwards the target/srcElement becomes BODY. Works only onmouseover/out in Netscape 4 |
|||
srcElement | Yes | No | Yes | 7 (and 6) |
Yes | |||
currentTarget | Event order | No | 6 | Yes | No | Refers to the HTML element that the event is currently handled by. There is no similar Microsoft property. |
||
relatedTarget | Mouse events | No | 6 | Yes |
For mouseovers the relatedTarget/fromElement is where the mouse comes from.For mouseouts the relatedTarget/toElement is where the mouse goes to. |
|||
fromElement, toElement | Yes | No | Yes | 7 (and 6) |
||||
Question | Property | Page | Compatibility | Remarks | ||||
IE | NS | Safari | Op | iCab | ||||
Which key was pressed during the event? | keyCode | Event properties See also the ancient Keypress script in the archives |
Yes | 6 | Yes | Yes (except 5 Mac) | No | The 'a' key has value 65, except on NN4 where it has 97 You can get the character by String.fromCharCode . |
which | No | Yes | ||||||
Which special key was pressed during the event? | shiftKey, altKey, ctrlKey | Not treated | Yes | 6 | Yes | No | These three properties become true when the appropriate special key is pressed.
In Opera they only become true in combination with another key, so pressing only Shift gives no reaction. |
|
modifiers | No | 4 | No | Values: 1: Alt, 2: Ctrl, 4: Shift, 8: Command (Can be combined: 6 means Ctrl + Alt) |
||||
Which mouse button was pressed during the event? | which Values: 1: Left button 2: Middle button/wheel 3: Right button |
Event properties | No | Yes | No | Only left button | No | Reading out the button is only possible with mousedown and
mouseup events.
If the mouse has been configured for left-handed use the left and right buttons change place On Mac there is only one button. Nonetheless Netscape 6 counts a Ctrl-Click as a right-click. |
(MS) button Values: 1: Left button 4: Middle button/wheel 2: Right button |
Yes | No | Yes | No | ||||
(W3C) button Values: 0: Left button 1: Middle button/wheel 2: Right button |
No | 6 | No | |||||
Question | Property | Page | Compatibility | Remarks | ||||
IE | NS | Safari | Op | iCab | ||||
What was the mouse position during the event? | clientX, clientY | See my Evolt article | Yes | 6 | non–standard (but the standard itself is wrong) | pageX/Y reliably give the coordinates relative to the document. clientX/Y is a godawful mess. |
||
pageX, pageY | No | Yes | 7 (and 6) |
Some |
||||
screenX, screenY | Event properties | Yes | This pair gives the mouse coordinates relative to the entire computer screen. | |||||
x, y | Not studied | Yes | 4 | No | 7 (and 6) |
Yes | Didn’t study these properties, except to ascertain that they don’t contain a solution for our problem. | |
offsetX, offsetY | Yes | No | No | |||||
layerX, layerY | No | Yes | No | Yes | ||||
Question | Property | Page | IE | NS | Safari | Op | iCab | Remarks |
Compatibility |