W3C DOM Events

W3C DOM Compatibility - Events

This table was last changed on 20 April 2005. It will eventually be updated; I hope somewhere in the first quarter of 2008.

If you'd like to have some practical examples of what you can do with the W3C DOM, read my book ppk on JavaScript, especially chapter 8.

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:

Targets (currentTarget, from/toElement, originalTarget, relatedTarget, srcElement, target)
Mouse position (clientX/Y, layerX/Y, offsetX/Y, pageX/Y, screenX/Y, x/y)
Key properties (altKey/Left, ctrlKey/Left, keyCode, metaKey, modifiers, repeat, shiftKey/Left)
Miscellaneous properties (button, detail, timeStamp, type, wheelDelta, which)
Event handler registration (addEventListener, attachEvent, detachEvent, removeEventListener)
(Bubbling and canceling; not yet ready)
(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.75	Safari 1.2	Opera 8	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
	focus, keypress, mouseover, mouseup, resize Test page	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
	mouseover Test page	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
	mouseover Test page	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.75	Safari 1.2	Opera 8	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
	focus Test page	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
	keypress Test page	See target
	mouseover, mouseup Test page	Almost	Almost	Almost	No	Incorrect	Yes	No
	mouseover, mouseup Test page	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
	resize Test page	See target
Property	Events	Explorer 5 Win	Explorer 6 Win	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.2	Opera 8	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
	focus Test page	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
	keypress Test page	Netscape 4 returns nothing (document) or the entire outerHTML of the node (textarea).
	mouseover, mouseup Test page	No	No	Almost	Yes	Incorrect	Yes	Minimal
	mouseover, mouseup Test page	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. When mouse events occur on text or inline elements and bubble up to the containing element, Mozilla 1.2 and before and Safari v60 and v80 see the text node as the target of the event. Other browsers report the inline element (A, B or CODE in the example) and don't react to events on text nodes.
	resize Test page	No	No	Yes	Yes	Incorrect	Yes	Yes
	resize Test page	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

This table has been moved to the CSS Object Model page.

Key event properties

Property	Events	Explorer 5 Win	Explorer 6 Win	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.2	Opera 8	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
	keydown, keyup Test page	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
	keydown, keyup Test page
charCode	See the special Detecting keystrokes page.
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
	keydown, keyup Test page
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
	keydown, keyup Test page	Explorer Windows always returns false
keyCode	See the special Detecting keystrokes page.
metaKey Is `true` when the meta key has been pressed, `false` when it hasn't.	keydown, keyup Test page	No	No	No	Mac	Yes	No	No
	keydown, keyup Test page	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 Safari. 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.75	Safari 1.2	Opera 8	Netscape 4
modifiers Returns a bitmask that shows which special keys were pressed.	keydown, keyup Test page	No	No	No	No	No	No	Yes
	keydown, keyup Test page	modifiers is a bitmask: 1: Alt 2: Ctrl 4: Shift 8: Command Can be combined (ie. 6 = Ctrl + Shift).
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
	keydown, keyup Test page
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
	keydown, keyup Test page
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
	keydown, keyup Test page
which Equivalent of `keyCode`	See next table

Miscellaneous properties

Property	Events	Explorer 5 Win	Explorer 6 Win	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.2	Opera 8	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	W3C	No
	mousedown Test page	The Microsoft implementation is the only one that makes sense. `button` is a bitmask: 1 - Left button 2 - Right button 4 - Middle button They can be combined in Explorer Windows, so clicking on the left and middle button simultaneously gives a `button` of 5. Only Microsoft's implementation allows these combinations, the W3C standard doesn't. 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 allows you to 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. Old Operas used their own values; but Opera 8b has switched to the W3C 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
	mousedown Test page	'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.75	Safari 1.2	Opera 8	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	No	No
	mousedown/ up/ click, keydown/ up/ press Test page	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
	Any event Test page
wheelDelta How many pixels the mouse wheel scrolls the page.	mousewheel (MS proprietary) Test page	No	Yes	No	No	No	No	No
	mousewheel (MS proprietary) Test page
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
	keydown, keyup Test page	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	Yes	Incomplete
	mousedown Test page	Netscape 4 cannot detect the middle button. Safari gives `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.75	Safari 1.2	Opera 8	Netscape 4
addEventListener() Add an event handler to an element. W3C	click Test page	No	No	No	Yes	Yes	Yes	No
	click Test page	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
	click Test page	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
	click Test page	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
	click Test page	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.