W3C DOM Compatibility - Events

These tables contain compatibility information for the Event methods and properties. It contains the W3C DOM Event specification and large sections of the Microsoft and Netscape proprietary event modules.

The W3C DOM Events module has not been implemented at all in Explorer, so browser differences are much sharper than in the other modules. I also added Netscape 4 compatibility information because its system is different from both the W3C and the Microsoft systems. I advise you to read my Introduction to events for an overview.

Currently this page contains the following tables:

  1. Targets (currentTarget, from/toElement, originalTarget, relatedTarget, srcElement, target)
  2. Mouse position (clientX/Y, layerX/Y, offsetX/Y, pageX/Y, screenX/Y, x/y)
  3. Key properties (altKey/Left, ctrlKey/Left, keyCode, metaKey, modifiers, repeat, shiftKey/Left)
  4. Miscellaneous properties (button, detail, timeStamp, type, wheelDelta, which)
  5. Event handler registration (addEventListener, attachEvent, detachEvent, removeEventListener)
  6. (Bubbling and canceling; not yet ready)
  7. (Event creation; not yet ready)

See also the key to my compatibility tables.

Targets

All targeting properties are described in detail on the Event properties (target and srcElement), Event order (currentTarget) and Mouse events (from/toElement and relatedTarget) pages.

Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
currentTarget
The currentTarget property refers to the HTML element currently handling the event. This is the element the event handler has been registered on.
focus, keypress, mouseover, mouseup, resize

Test page
No No No Yes Yes Yes No
There is no Microsoft equivalent for this property.
See the Event order page for more information.
fromElement, toElement
The from/toElement properties exist only for mouseover and mouseout. They refer to the element the mouse comes from (mouseover) and the element the mouse goes to (mouseout).
mouseover

Test page
Yes Yes Yes No Yes Yes No
Equivalent W3C property: relatedTarget.
See the Mouse events page for more information.
relatedTarget
The relatedTarget property refers to the HTML element the event is 'related' to: where the mouse comes from or goes to.
mouseover

Test page
No No No Yes Yes Yes No
Equivalent Microsoft properties: from/toElement
See the Mouse events page for more information.
Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
srcElement
The srcElement is the Microsoft equivalent of target. See there for more information.
focus

Test page
Incorrect Incorrect Yes No Yes Yes No
See target
  • Explorer Windows doesn't return a srcElement for a focus event on the window.
keypress

Test page
Yes Yes Yes No No Yes No
See target
mouseover, mouseup

Test page
Almost Almost Almost No Incorrect Yes No
See target
  • On links, Explorer returns the full href as target/srcElement instead of an A element. You can access the element, though.
resize

Test page
Incorrect Incorrect Yes No Incorrect Yes No
See target
Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
target
The target property refers to the HTML element the event actually took place on, even when the event handler has been registered not on the HTML element but on one of its ancestors.

Mozilla 1.3 and Safari v73 have obligingly mended their earlier target confusion: text nodes are no longer counted as separate targets.

Unfortunately Safari v85 has reverted to the incorrect behaviour.
focus

Test page
No No Yes Yes Yes Yes Incorrect
See the Event properties page for more information on target.
  • Netscape 4 returns the window object (window) or the entire outerHTML of the node (textarea).
keypress

Test page
No No Yes Yes No Yes Incorrect
  • Netscape 4 returns nothing (document) or the entire outerHTML of the node (textarea).
mouseover, mouseup

Test page
No No Almost Yes Incorrect Yes Minimal
  • On links, Explorer returns the full href as target/srcElement instead of an A element.
  • Netscape 4 does not support target on mousedown, mouseup and click. This is a very serious bug.
resize

Test page
No No Yes Yes Incorrect Yes Yes
I ignore the difference between [object Window] and the document node for the moment. There are very serious problems in connecting an HTML document to the window, and I'm going to separately research these problems at a later date.
  • Safari returns null.

Mouse position

For a detailed treatment of mouse position properties and their serious problems, see my sligthly outdated Evolt article.

Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
clientX,clientY
window
The clientX/Y property pair returns the mouse coordinates relative to the window.
mouseover, mouseup

Test page
Yes Yes Yes Yes pageX/Y Yes No
  • Safari gives the mouse coordinates relative to the document which it also gives in pageX/Y.
layerX, layerY
Layer
The layerX/Y property pair returns the mouse position relative to the layer (absolutely positioned element) the event has been registered on.
mouseover, mouseup

Test page
No No No Yes Yes No Incorrect
  • Netscape 4 seems to calculate layerX (though not Y) relative to the window instead of relative to the layer.
offsetX, offsetY
Element
The offsetX/Y property pair returns the mouse coordinates relative to the element the event has been registered on.
mouseover, mouseup

Test page
Yes Yes Incorrect No Yes Yes No
See the Find position page for a further explanation of offset and browser differences.
  • Explorer 5 Mac gives very weird values. The offsetX seems to be calculated relative to the text contained by the layer. This bug could be related to IEMac's padding bug in the Find Position script.
    I don't even attempt to explain the offsetY value.
Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
pageX, pageY
Document
The pageX/Y property pair returns the mouse coordinates relative to the document.
mouseover, mouseup

Test page
No No No Yes Yes Yes Yes
The most useful and reliable of all mouse position property pairs.
screenX, screenY
Screen
The screenX/screenY property pair returns the mouse coordinates relative to the entire computer screen.
mouseover, mouseup

Test page
Yes Yes Yes Yes Yes Yes Yes
Although this is the only cross-browser property pair the information it contains is mostly useless.
x, y
Messy
The x/y property pair doesn't have a general definition.
mouseover, mouseup

Test page
See below See below clientX/Y No clientX/Y See below layerX/Y
Don't use this, it's a mess.
  • MSDN: "Sets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element." Explorer Windows and Opera adhere to this definition (I suppose).
  • In Explorer Mac and Safari it is equal to clientX/Y.
  • In Netscape 4 x/y is equal to layerX/Y.

Key event properties

Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
altKey
Is true when the alt key has been pressed, false when it hasn't.
keydown, keyup

Test page
Yes Yes Yes Yes Yes No No
  • Opera doesn't react to the Alt key at all
altLeft
Is true when the left alt key has been pressed, false when it hasn't.
keydown, keyup

Test page
No Yes No No No No No
 
ctrlKey
Is true when the control key has been pressed, false when it hasn't.
keydown, keyup

Test page
Yes Yes Yes Yes Yes Yes No
 
ctrlLeft
Is true when the left control key has been pressed, false when it hasn't.
keydown, keyup

Test page
No Yes No No No No No
  • Explorer Windows always returns false
keyCode
Returns the code of the pressed key. a = 65 etc.
keydown, keyup

Test page
Yes Yes Yes Yes Yes Yes No
It is extremely difficult to detect arrow keys, function keys and Insert/Home/etc. keys.
metaKey
Is true when the meta key has been pressed, false when it hasn't.
keydown, keyup

Test page
No No No Mac Incomplete No No
Which key is the meta key? On Mac it's Command, on Windows I don't know (and the browsers don't know, either). Basically this property is only supported by Mozilla on Mac, and by Safari, but not on the key events.
  • Mozilla Windows and Opera always return false. The other browsers return undefined.
Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
modifiers
Returns a bitmask that shows which special keys were pressed.
keydown, keyup

Test page
No No No No No No Yes
modifiers is a bitmask:
1: Alt
2: Ctrl
4: Shift
8: Command
Can be combined (ie. 6 = Ctrl + Command).
repeat
Is true when the user keeps the key depressed and the system's key repeat starts up.
keydown, keyup

Test page
Yes Yes No No No No No
shiftKey
Is true when the shift key has been pressed, false when it hasn't.
keydown, keyup

Test page
Yes Yes Yes Yes Yes Yes No
shiftLeft
Is true when the left shift key has been pressed, false when it hasn't.
keydown, keyup

Test page
No Yes No No No No No
which
Equivalent of keyCode
See next table

Miscellaneous properties

Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
button
Because W3C's spec is unworkable, this property has been reduced to a complete mess
mousedown

Test page
Yes Yes Yes W3C Yes Proprietary No
The Microsoft implementation is the only one that makes sense. button is a bitmask:
1 - Left button
2 - Right button
4 - Middle button
They might be combined, so 5 would mean Left + Middle button. No browser supports this yet, but only Microsoft's implementation allows these combinations.

Fortunately all browsers agree that a right click has a button value of 2.
  • Mozilla on Mac sees a Shift+Click as a right button click.
  • All other Mac browsers only detect the left button, even if the mouse has more than one button.
  • Opera uses its own silly system. In addition, you can disable right click detection in the JavaScript preferences.
W3C's definition is:
0 - Left button
1 - Middle button
2 - Right button
0 should mean "no button pressed", any other meaning is silly. Besides these values cannot be combined into a bitmask: you'll never know whether the left button has been pressed. This definition is very shoddy work.

For no good reason, Opera has defined its own values.
1 - Left button
2 - Right button
3 - Middle button
detail
The detail property gives some more details about the event.
mousedown

Test page
No No No Incorrect on Windows Yes Incorrect No
'More details' have only been defined for click events and their siblings: here detail gives the total amount of clicks fired in rapid succession.
Works perfectly only in Mozilla Mac and Safari.
  • Mozilla Windows's implementation is closely linked to the function of repeated clicks. The first click inserts the caret, the second one selects the word, the third one the entire line. The fourth click reverts the selection back to a single word, while the fifth click again selects the whole line.
    detail's values follow this 1-2-3-2-3 sequence exactly and thus show which text has been selected by the user.
  • Opera always returns 0
Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
timeStamp
The timeStamp property returns the Epoch time at which the event took place (at least, I assume so; values on my Windows and Mac computers differ significantly).
mousedown/ up/ click, keydown/ up/ press

Test page
No No No Incomplete Yes Yes No
As long as you use timeStamp for comparing it to other timeStamps, and not for obtaining an absolute time, you shouldn't encounter too many problems.
  • In Mozilla it doesn't work for a click event.
type
The type property returns the type of the event, without the 'on' prefix.
Any event

Test page
Yes Yes Yes Yes Yes Yes Yes
 
wheelDelta
How many pixels the mouse wheel scrolls the page.
mousewheel (MS proprietary)

Test page
No Yes No No No No No
 
which
Two meanings
1) For the key events
Returns the code of the pressed key. a = 65 etc.

2) For the mouse events
Returns the mouse button pressed
1 - Left button
2 - Middle button
3 - Right button
keydown, keyup

Test page
No No No Yes Yes Yes Incorrect
It is extremely difficult to detect arrow keys, function keys and Insert/Home/etc. keys.
  • Netscape 4 gives a key code 97. This is the old Netscape 4 system.
mousedown

Test page
No No No Yes (Prop) button (MS) button Incomplete
  • Netscape 4 cannot detect the middle button.
  • Safari and Opera give which the same value as button.

Event handler registration

See the Advanced event registration models page for a full discussion of these methods. I advise you not to use either of these systems since they are not cross-browser. There is an alternative supported by all browsers: the traditional event registration model.

Property Events Explorer 5 Win Explorer 6 Win Explorer 5.2 Mac Mozilla 1.4 Safari 1.2 Opera 7.20 Netscape 4
addEventListener()
Add an event handler to an element. W3C
click

Test page
No No No Yes Yes Yes No
x.addEventListener('click',doSomething,false)
Add an onclick event handler that executes function doSomething() to element x.

The true/false flag at the end states whether the event handler should be executed in the capturing or in the bubbling phase.
attachEvent()
Add an event handler to an element. Microsoft
click

Test page
Yes Yes No No No Yes No
x.attachEvent('onclick',doSomething);
Add an onclick event handler that executes function doSomething() to element x.
detachEvent()
Remove an event handler from an element. Microsoft
click

Test page
Yes Yes No No No Yes No
x.detachEvent('onclick',doSomething);
Remove the onclick event handler that executes function doSomething() from element x.
removeEventListener()
Remove an event handler from an element. W3C
click

Test page
No No No Yes Yes Yes No
x.removeEventListener('click',doSomething,false);
Remove the onclick event handler that executes function doSomething() from element x.

Bubbling and canceling

Later on I'll add compatibility information for bubbles, cancelable, cancelBubble, eventPhase, preventDefault(), returnValue and stopPropagation(). The problem is creating a good, generally applicable test page and finding the time to do this.

Event creation

Later on I'll also add compatibility information for createEvent(), createEventObject(), dispatchEvent(), fireEvent(), initEvent(), initMouseEvent(), initMutationEvent() and initUIEvent(). The problem is again creating the tests, and the fact that I'm unsure how this methods ought to work.