Event compatibility tables

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 a quick overview of events browser compatibility.

For historical data and ancient browsers see the old Inline events table I created in 2000. It is no longer maintained.

See also the key to my compatibility tables.

Interface events

Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
blur, focus
The blur event fires when an element loses focus.
The focus event fires when an element gains focus.

On a window, these events usually also fire when the window loses or gains focus because another element like a form field or a link gains or loses focus.

If the user clicks on a link, the link gains the focus and keeps it until another element gains the focus.

Curiously, W3C has never recognized the existence of these events on windows.
Test page window
Yes Yes Yes Buggy No Yes Yes
window.onfocus = doSomething;
  • In Mozilla hiding and showing the window fires both events three times. Clicking on the window also fires the focus event.
    If it must work perfectly in Mozilla and you don't care about Netscape 4, use document.body.onfocus.
Test page Link element
Yes Yes Incomplete Incomplete No Incomplete No
document.links[0].onblur = doSomething;

A perfect implementation would allow focusing and blurring both by a click on the link and by TABbing to the link.
Opera only supports the click; Mozilla and Explorer Mac only the TAB.
Test page Form fields
Yes Yes Yes Yes Incomplete Yes Yes
document.forms[0].elements[1].onblur = doSomething;
  • Safari supports these events only on text elements.
contextmenu
The contextmenu event fires whenever the user calls up a context menu.
Test page document
Yes Yes No Yes No No No
document.oncontextmenu = doSomething;
  • This event is not supported by any Mac browser except for Mozilla.
Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
load
The load event fires when an HTML document has been loaded completely, including all images, and arrays such as document.images have been initialized. You should run your own initializing scripts onload.
Test page window
Yes Yes Yes Yes Yes Minimal and alternative Yes
window.onload = doSomething;
  • Opera is being obnoxious
    The event does not fire when the user uses Back or Forward (see unload)
    Besides, it does not see <body onload> and window.onload as the same event; test it here.
    This code:
    window.onload = doSomething1;
    <body onLoad="doSomething2()">
    should only execute doSomething2(), because the earlier onload is overwritten by the later one. However, Opera executes both scripts.
    Opera itself says this is the correct way to handle onload. Although this may be true, it will certainly cause compatibility problems.
resize
The resize event fires while the user resizes the browser window. A major resize job causes the event to fire many times over
Test page window
Yes Yes Yes Alternative Yes Yes Buggy until 4.5
window.onresize = doSomething;
  • Mozilla fires the event once after the user has stopped resizing the window.
  • It seems that Explorer Windows on Win98 fires the event only twice, after the resizing has stopped. On XP it fires continuously.
  • In early Netscape 4's (until about 4.5) the resize event also fires when a page has finished loading, just after the load event.
Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
scroll
The scroll event fires when the user scrolls a page, a frame or an element with overflow: auto in any way supported by the browser: by using the scrollbar, the arrow keys or the mouse wheel.
Test page window
Yes Yes Yes Minimal No Yes No
window.onscroll = doSomething;
  • Mozilla only fires the event when the user uses the scrollbar. Since you cannot be certain to capture a scroll event, I judge its support Minimal, not Incomplete.
Test page element with overflow: auto
Yes Yes Yes Yes No No Untestable
x.onscroll = doSomething;
where x is an element with overflow: auto
  • Netscape 4 doesn't support overflow: auto
unload
The unload event fires whenever the page is unloaded for whatever reason.
It is not possible to distinguish between the user going to another page and the user closing the entire window, the unload event always fires. It is also not possible to cancel the unloading of the page.
Test page window
Yes Yes Yes Yes Yes Minimal Yes
window.onunload = doSomething;
  • In Opera load and unload do not fire when the user uses Back or Forward to enter or leave a page.
    This severely hampers the usefulness of the events. When I write a load or unload script to, for instance, adjust the navigation of this site, I want it to run whenever the user enters or leaves the page, and not just when a browser thinks it's appropriate.
    Therefore I judge Opera's support Minimal and not Incomplete.

Mouse events

Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
click
The click event fires after one mousedown and one mouseup event have taken place on the same element.

Correct order:
  1. mousedown
  2. mouseup
  3. click

On links the event should also fire when the user tabs to the links and then hits Enter.
Test page document
Yes Yes Yes Yes Yes Yes Yes
document.onclick = doSomething;
Test page Link elements
Yes Yes Incomplete Yes Yes Yes Yes
document.links[0].onclick = doSomething;

  • In Explorer Mac, hitting Enter when the focus is on the link doesn't fire the click event.
  • Tabbing to a link is impossible in Opera and Safari. Officially the click event works fine, though, and the problem lies in the lack of Tab functionality.
Test page Any other element
Yes Yes Yes Yes Yes Yes Incomplete
x.onclick = doSomething;
where x is any HTML element
  • Netscape 4 does not count clicks on the text and requires captureEvents()
Test page Form fields
Yes Yes Incomplete Yes Almost Yes Incomplete
document.forms[0].elements[1].onclick = doSomething;
  • Safari fires the click event on a select box onblur
  • Netscape 4: Not on textareas and selects
  • Explorer Mac: Not on selects
Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
dblclick
The dblclick event fires after the user has clicked twice in rapid succesion on the same element. All browsers support it.
The incompatibilities are in the succession of events leading up to the dblclick. Every browser uses a different event order.

In practice it is not possible to use both the click and dblclick events on the same element. The browsers aren't sufficiently able to distinguish between them.
Test page Link element
Yes Yes Yes Yes Yes Yes Yes
document.links[0].ondblclick = doSomething;

The order of events leading up to the dblclick:
  • Explorer Windows: mousedown mouseup click mouseup dblclick
  • Explorer Mac: mousedown mouseup click mousedown dblclick
  • Mozilla: mousedown mouseup click mousedown mouseup click dblclick
  • Safari: mousedown mouseup click mousedown mouseup dblclick
  • Opera: mousedown mouseup click click dblclick mouseup
  • Netscape 4: mousedown mouseup mousedown mouseup dblclick
Test page Any element
Yes Yes Yes Yes Yes Yes Yes
x.ondblclick = doSomething;
where x is any HTML element
  • Netscape 4 requires captureEvents()
mousedown, mouseup
The mousedown event fires when the user depresses the mouse button.
The mouseup event fires when the user releases the mouse button.
If these two events take place on the same element, a click event fires.
Test page document
Yes Yes Yes Yes Yes Yes Yes
document.links[0].onmousedown = doSomething;
Test page Link element
Yes Yes Yes Yes Yes Yes Yes
document.links[0].onmousedown = doSomething;
Test page Any element
Yes Yes Yes Yes Yes Yes Yes
x.onmousedown = doSomething;
where x is any HTML element
  • Netscape 4 requires captureEvents()
mouseenter, mouseleave
The mouseenter and mouseleave events are subtly different from mouseover and mouseout. See the Mouse events page for an explanation of the differences.
mouseenter fires after mouseover, mouseleave before mouseout.
Test page Link element
5.5 Yes No No No No No
document.links[0].onmouseenter = doSomething;
Test page Any element
5.5 Yes No No No No No
x.onmouseleave = doSomething;
where x is any HTML element

I must admit I expected support by some minor browser when I included these Microsoft events in the test program.
Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
mousemove
The mousemove event fires whenever the user moves the mouse. It continues firing as long as the mouse moves.
Test page document
Yes Yes Yes Yes Yes Yes Yes
document.onmousemove = doSomething;
  • Netscape 4 requires captureEvents()
Test page Any element
Yes Yes Yes Yes Yes Yes Yes
x.onmousemove = doSomething;
where x is any HTML element
  • Netscape 4 requires captureEvents()
mouseover, mouseout
The mouseover event fires when the mouse enters the area of the element. The mouseout event fires when the mouse leaves the area again.
Test page Link element
Yes Yes Yes Yes Yes Yes Yes
document.links[0].onmouseover = doSomething;
Test page Any element
Yes Yes Yes Yes Buggy Yes Yes
x.onmouseout = doSomething;
where x is any HTML element
  • Safari fires separate events for mouseovers and -outs on the text contained by element x
  • Mozilla 1.2 did the same, but the bug was solved in 1.3

Form events

Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
change
The change event should fire immediately after any form element changes its state.

Text fields fire the event onblur when their content has changed.
Selects fire the event onclick at the moment of option selection.
Checkboxes and radio buttons should fire the event onclick
Test page Form fields
Almost Almost Almost Yes Incomplete Incomplete Incomplete
document.forms[0].elements[1].onchange = doSomething;
  • Checboxes and radios in Explorer fire the event onblur, which is too late.
  • Opera does not support this event on radios.
  • Netscape 4 and Safari do not support this event on checkboxes and radios.
  • No browser fires the event after a reset has cleared all form fields.
reset
The reset event fires when the user resets the form.
Test page Form element
Yes Yes Yes Yes Yes Yes Yes
document.forms[0].onreset = doSomething;
select
The select event fires when the user has selected text in a text field. It should fire onmouseup, when the user finishes selecting.
Test page Form fields
Alternative Alternative Yes Yes No Yes No
document.forms[0].elements[1].onselect = doSomething;
  • Explorer Windows fires the event whenever any character is added to or removed from the selection
submit
The submit event fires when the user submits the form. It does not fire when a script submits the form (document.forms[0].submit()).
Test page Form element
Yes Yes Yes Yes Yes Yes Yes
document.forms[0].onsubmit = doSomething;

Key events

Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
keydown, keypress, keyup
keydown and keypress keep firing continuously as long as the user keeps a key depressed. keyup fires once when the user releases the key.

In Netscape 4 the keydown event fires only once, when the user initially depresses the key. In all other browsers there is no difference between keydown and keypress.

Test page Document
Yes Yes Yes Yes Yes Yes Yes
document.onkeydown = doSomething;
Test page Form fields
Yes Yes Yes Yes Yes Yes Yes
document.forms[0].elements[1].onkeydown = doSomething;
Support on text fields is enough to merit a Yes.

If you want to prevent the default action (ie: prevent the character from being inserted), you must use the keypress event.

Miscellaneous events

abort
The abort event fires when the user aborts the loading of images or the page.
It's very hard to create tests for the abort event. I'd need a test file of 12.5 Meg, to make sure that even on a fast 10 Mb/sec connection the user of the test has about 10 seconds to realize that to test the abort event he should stop the downloading and then to actually do it.

Besides the event is completely useless. I never needed it myself, nor did I ever encounter any site that uses it.

Just forget abort.
Event Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
error
The error event fires when a JavaScript error has occurred (window) or when a image cannot be found (img elements).
Test page window
Almost Yes Yes Yes No No Yes
window.onerror = doSomething;
  • Explorer 5 Windows gives undefined for the event type.
Test page Image element
Yes Yes Yes Yes Yes Yes Yes
<img src="404.gif" onerror="doSomething()">

It's best to use inline event registration for this event because the error event may fire before the page has completely loaded, in which case an event handler registered onload wouldn't capture it.
subtreemodified
The subtreemodified event of an element fires whenever any change occurs in the node tree of the descendants of the element.
Test page Any element
No No No No No No No
x.onsubtreemodified = doSomething;
where x is any HTML element

This is the most general of W3C's DOM events. Unfortunately my test page doesn't work in any browser. Ive heard a rumour that the event does work with the W3C event registration model in Mozilla and Opera. Unfortunately that turns out not to be the case.

General event information

Question Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
Event registration models
How do I add event handlers to an HTML element?
Early event handlers Inline; DO NOT USE
Yes Yes Yes Yes Yes Yes Yes
<A HREF="somewhere.html" onClick="doSomething()">
Ancient and reliable. Since this technique requires you to write JavaScript code in your XHTML, you shouldn't use it.
Traditional model Traditional
Yes Yes Yes Yes Yes Yes Yes
element.onclick = doSomething
The best choice overall
Advanced models W3C
No No No Yes Yes Yes No
element.addEventListener ('click',doSomething,false)
The most advanced model
Advanced models Microsoft
Yes Yes No No No Yes No
element.attachEvent ('onclick',doSomething)
The worst choice overall
Question Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
Event accessing models
How do I access the event?
Event accessing W3C/Netscape
No No No Yes Yes Yes Yes
function doSomething(e) {code}
e contains the event
Event accessing Microsoft
Yes Yes Yes No Yes Yes No
window.event contains the event
Event accessing Cross browser
Yes Yes Yes Yes Yes Yes Yes
function doSomething (e) {
	if (!e) var e = window.event;
}
Question Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
Event order
If an element and one of its ancestors have an event handler for the same event, which one fires first?
Event order Event capturing
No No No Yes Yes Yes Yes
The event is handled first by the element highest in the document tree, and is then passed downwards to lower elements

You must use W3C event registration to capture events
Event order Event bubbling
Yes Yes Yes Yes Yes Yes No
Default
The event is handled first by the element lowest in the document tree, and is then passed upwards to higher elements

Event properties

For the complete list, see the W3C DOM Compatibility - Events page.

Question Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
Event type
What is the type of the event?
Event properties type
Yes Yes Yes Yes Yes Yes Yes
e.type
Cross browser
target
Which HTML element is the target of the event?
Event properties target
No No Yes Yes Yes Yes Minimal
e.target
Event properties srcElement
Yes Yes Yes No Yes Yes No
e.srcElement
Event properties Cross browser
Yes Yes Yes Yes Yes Yes Minimal
var tg = (e.target) ? e.target : e.srcElement
Keys
Which key was pressed during the event?
Event properties keyCode
Yes Yes Yes Yes Yes Yes No
e.keyCode
a = 65, etc.
You can get the character by String.fromCharCode(keyCode)
Event properties which
No No No Yes Yes Yes a = 97
e.which
a = 65 etc.
Question Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
Modifier keys
Which modifier key was pressed during the event?
altKey, ctrlKey, shiftKey
Yes Yes Yes Yes Yes Incomplete No
e.shiftKey
true or false
  • Opera doesn't support altKey
modifiers
No No No No No No Yes
e.modifiers
Values: 1: Alt, 2: Ctrl, 4: Shift, 8: Command
Can be combined: 6 means Ctrl + Alt
Mouse button
Which mouse button was pressed during the event?

Cross-browser chaos; fortunately 2 always means right button

Explorer Mac and Safari never react to a right or middle click, even when you have a 2 or 3 button Mac mouse.
Event properties button
Yes Yes Only left 0: left
1: middle
2: right
Only left 1: left
3: middle
2: right
No
e.button
1: left
2: right
4: middle

Reading out this property is only possible with mousedown and mouseup events.
Event properties which
No No No Yes Only left 1: left
3: middle
2: right
No middle
e.which
1: left
2: middle
3: right
Question Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50 Netscape 4
Mouse position
What was the mouse position during the event?
Evolt article (slightly outdated) pageX/Y
No No No Yes Yes Yes Yes
e.pageX, e.pageY
Mouse position relative to the document
Evolt article (slightly outdated) clientX/Y
Yes Yes Yes Yes Yes Yes No
e.clientX, e.clientY
Mouse position relative to the window. Add the scrolling offset to find the position relative to the document.
Evolt article (slightly outdated) Cross browser
Yes Yes Yes Yes Yes Yes Yes
function doSomething(e)
{
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY)
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY)
	{
		posx = e.clientX + document.body.scrollLeft;
		posy = e.clientY + document.body.scrollTop;
	}
}