Events — browser compatibility

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.

General information

ActionModel Page CompatibilityRemarks
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

Event properties

QuestionProperty PageCompatibilityRemarks
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 MacYes 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)
QuestionProperty PageCompatibilityRemarks
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(keyCode | which).
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
QuestionProperty PageCompatibilityRemarks
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)		 Sometimes
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

Home