There’s a lot of syntax to remember when dealing with JS events, so I figured it would be a good idea to compile a reference list that covers all types of events and the proper syntax to use them.

Internet Explorer has its own set of rules compared to Firefox, Chrome, Safari, and Opera. I will refer to non-IE browsers as “W3C browsers,” since there’s not really any other term that collectively refers to them.

How to Use this Reference

At the top of each block is a big event name. Click it to collapse/expand blocks. Under the name, you will see the list of valid elements that can use it. These vary by browser.

Code snippets are broken down by browser and registration type (traditional or advanced). The traditional (or inline) type means that you will overwrite any existing handler. The advanced method can add additional listeners and handlers.

For all examples, “myFunction” is the name of my fake event handler. Also, for W3C’s addEventListener, I leave useCapture as “false”. Look that stuff up if you need more info.

For easy viewing, you may want to – collapse the entire list.

CLICK toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onclick = myFunction;
Remove – element.onclick = null;
IE only Adds New Add + element.attachEvent("onclick",myFunction);
Remove – element.detachEvent("onclick",myFunction);
W3C Only Adds New Add + element.addEventListener("click",myFunction,"false");
Remove – element.removeEventListener("click",myFunction,"false");

DOUBLE CLICK toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.ondblclick = myFunction;
Remove – element.ondblclick = null;
IE only Adds New Add + element.attachEvent("ondblclick",myFunction);
Remove – element.detachEvent("ondblclick",myFunction);
W3C Only Adds New Add + element.addEventListener("dblclick",myFunction,"false");
Remove – element.removeEventListener("dblclick",myFunction,"false");

LOAD toggle open

All Browsers valid on window only
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + window.onload = myFunction;
Remove – window.onload = null;
IE only Adds New Add + window.attachEvent("onload",myFunction);
Remove – window.detachEvent("onload",myFunction);
W3C Only Adds New Add + window.addEventListener("load",myFunction,"false");
Remove – window.removeEventListener("load",myFunction,"false");

UNLOAD toggle open

All Browsers valid on window only
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + window.onunload = myFunction;
Remove – window.onunload = null;
IE only Adds New Add + window.attachEvent("onunload",myFunction);
Remove – window.detachEvent("onunload",myFunction);
W3C Only Adds New Add + window.addEventListener("unload",myFunction,"false");
Remove – window.removeEventListener("unload",myFunction,"false");

MOUSE MOVE toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onmousemove = myFunction;
Remove – element.onmousemove = null;
IE only Adds New Add + element.attachEvent("onmousemove",myFunction);
Remove – element.detachEvent("onmousemove",myFunction);
W3C Only Adds New Add + element.addEventListener("mousemove",myFunction,"false");
Remove – element.removeEventListener("mousemove",myFunction,"false");

MOUSE OVER toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onmouseover = myFunction;
Remove – element.onmouseover = null;
IE only Adds New Add + element.attachEvent("onmouseover",myFunction);
Remove – element.detachEvent("onmouseover",myFunction);
W3C Only Adds New Add + element.addEventListener("mouseover",myFunction,"false");
Remove – element.removeEventListener("mouseover",myFunction,"false");

MOUSE OUT toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers outwrites Add + element.onmouseout = myFunction;
Remove – element.onmouseout = null;
IE only Adds New Add + element.attachEvent("onmouseout",myFunction);
Remove – element.detachEvent("onmouseout",myFunction);
W3C Only Adds New Add + element.addEventListener("mouseout",myFunction,"false");
Remove – element.removeEventListener("mouseout",myFunction,"false");

MOUSE DOWN toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onmousedown = myFunction;
Remove – element.onmousedown = null;
IE only Adds New Add + element.attachEvent("onmousedown",myFunction);
Remove – element.detachEvent("onmousedown",myFunction);
W3C Only Adds New Add + element.addEventListener("mousedown",myFunction,"false");
Remove – element.removeEventListener("mousedown",myFunction,"false");

MOUSE UP toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onmouseup = myFunction;
Remove – element.onmouseup = null;
IE only Adds New Add + element.attachEvent("onmouseup",myFunction);
Remove – element.detachEvent("onmouseup",myFunction);
W3C Only Adds New Add + element.addEventListener("mouseup",myFunction,"false");
Remove – element.removeEventListener("mouseup",myFunction,"false");

MOUSE WHEEL toggle open

Microsoft Support document, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
IE or Opera Overwrites Add + element.onmousewheel = myFunction;
Remove – element.onmousewheel = null;
IE or Opera Adds New Add + element.attachEvent("onmousewheel",myFunction);
Remove – element.detachEvent("onmousewheel",myFunction);
Everyone Else Adds New Add + element.addEventListener("DOMMouseScroll",myFunction,"false");
Remove – element.removeEventListener("DOMMouseScroll",myFunction,"false");

KEY PRESS toggle open

Microsoft Support document, any element
W3C Support window, document, form elements
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onkeypress = myFunction;
Remove – element.onkeypress = null;
IE only Adds New Add + element.attachEvent("onkeypress",myFunction);
Remove – element.detachEvent("onkeypress",myFunction);
W3C Only Adds New Add + element.addEventListener("keypress",myFunction,"false");
Remove – element.removeEventListener("keypress",myFunction,"false");

KEY DOWN toggle open

Microsoft Support document, any element
W3C Support window, document, form elements
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onkeydown = myFunction;
Remove – element.onkeydown = null;
IE only Adds New Add + element.attachEvent("onkeydown",myFunction);
Remove – element.detachEvent("onkeydown",myFunction);
W3C Only Adds New Add + element.addEventListener("keydown",myFunction,"false");
Remove – element.removeEventListener("keydown",myFunction,"false");

KEY UP toggle open

Microsoft Support document, any element
W3C Support window, document, form elements
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onkeyup = myFunction;
Remove – element.onkeyup = null;
IE only Adds New Add + element.attachEvent("onkeyup",myFunction);
Remove – element.detachEvent("onkeyup",myFunction);
W3C Only Adds New Add + element.addEventListener("keyup",myFunction,"false");
Remove – element.removeEventListener("keyup",myFunction,"false");

SCROLL toggle open

Microsoft Support window, any element
W3C Support window, document, any element
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onscroll = myFunction;
Remove – element.onscroll = null;
IE only Adds New Add + element.attachEvent("onscroll",myFunction);
Remove – element.detachEvent("onscroll",myFunction);
W3C Only Adds New Add + element.addEventListener("scroll",myFunction,"false");
Remove – element.removeEventListener("scroll",myFunction,"false");

FOCUS toggle open

Microsoft Support window, any element
W3C Support window, document, form elements
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onfocus = myFunction;
Remove – element.onfocus = null;
IE only Adds New Add + element.attachEvent("onfocus",myFunction);
Remove – element.detachEvent("onfocus",myFunction);
W3C Only Adds New Add + element.addEventListener("focus",myFunction,"false");
Remove – element.removeEventListener("focus",myFunction,"false");

BLUR toggle open

Microsoft Support window, any element
W3C Support window, document, form elements
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onblur = myFunction;
Remove – element.onblur = null;
IE only Adds New Add + element.attachEvent("onblur",myFunction);
Remove – element.detachEvent("onblur",myFunction);
W3C Only Adds New Add + element.addEventListener("blur",myFunction,"false");
Remove – element.removeEventListener("blur",myFunction,"false");

CHANGE toggle open

All Browsers valid on form elements only
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onchange = myFunction;
Remove – element.onchange = null;
IE only Adds New Add + element.attachEvent("onchange",myFunction);
Remove – element.detachEvent("onchange",myFunction);
W3C Only Adds New Add + element.addEventListener("change",myFunction,"false");
Remove – element.removeEventListener("change",myFunction,"false");

SELECT toggle open

All Browsers valid on form elements only
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + element.onselect = myFunction;
Remove – element.onselect = null;
IE only Adds New Add + element.attachEvent("onselect",myFunction);
Remove – element.detachEvent("onselect",myFunction);
W3C Only Adds New Add + element.addEventListener("select",myFunction,"false");
Remove – element.removeEventListener("select",myFunction,"false");

RESET toggle open

All Browsers valid on form tag only
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + form.onreset = myFunction;
Remove – form.onreset = null;
IE only Adds New Add + form.attachEvent("onreset",myFunction);
Remove – form.detachEvent("onreset",myFunction);
W3C Only Adds New Add + form.addEventListener("reset",myFunction,"false");
Remove – form.removeEventListener("reset",myFunction,"false");

SUBMIT toggle open

All Browsers valid on form tag only
BROWSERS TYPE SYNTAX
All Browsers Overwrites Add + form.onsubmit = myFunction;
Remove – form.onsubmit = null;
IE only Adds New Add + form.attachEvent("onsubmit",myFunction);
Remove – form.detachEvent("onsubmit",myFunction);
W3C Only Adds New Add + form.addEventListener("submit",myFunction,"false");
Remove – form.removeEventListener("submit",myFunction,"false");