Types of JavaScript Events

W3C DOM Events

DOM Level 2 UIEvent: user interface events occur for interactions with browser's window

type	event description	target
load	Fires when HTML and all resources of a web page have finished loading	document, window
unload	Fires when web page is unloading for a new page requested	body, window
error	Fires when browser encounter a JS error or resource does not exist (inconsistent support)
resize	Fires repeatedly as browser's window is being resized	window
scroll	Fires repeatedly as user scrolls web page	document, element
Usage: The load event is commonly used to trigger scripts that access the content of a page. It can cause the page to look slow, because it is raised only when all images are fully loaded. As resize and scroll events fire repeatedly, do not use them to trigger complicated code.

DOM Level 4 FocusEvents: focus events occur when an link element or form field gains or loses focus

type	event description
focus or focusin	Element gains focus
blur or focusout	Element loses focus
Usage: The focus event is used when you want to show feedback to users as they interact with an element, for example with a tooltip. Do not confuse focus event with CSS :focus pseudoclass. The blur event is used when you need to trigger form validation as a user moves from one control to the next, rather than waiting for form submission.

DOM Level 2 MouseEvents: mouse events occur for a user interaction through mouse, touchscreen, trackpad

type	event description
click	User presses and releases the main mouse button. User presses the Enter key when an element has focus User tap on touchscreen
dblclick	User presses and releases a mouse button twice. User taps on touchscreen twice
mousedown	User presses a mouse button over an element (like touchstart on touchscreen)
mouseup	User releases a mouse button over an element (like touchend on touchscreen)
mouseover	User moves the mouse over an element. (not on touchscreen)
mousemove	Fire repeatedly when user moves the mouse around an element. (not on touchscreen)
mouseout	User moves the mouse off an element (not on touchscreen)
Usage: Target: all HTML elements on a web page support mouse events. Mouse events occur in the sequence: mousedown → mouseup → click, if you stop an event the following one will never happen. Do not use mouse events to change CSS, use the :hover pseudoclass Do not use the click event on form element, use the focus event.

DOM Level 4 KeyboardEvent: occur for a user's interaction with keyboard

type	event description
input	Fires when the content of <input> or <textarea> change. Incomplete support in IE9. For older browser you should use the keydown event
keydown	Fire when user presses a key on the keyboard. Fire repeatedly while the user hold down the key
keyup	Fire when user releases a key
keypress	Fire when user presses a key of a printable character
Usage: Keyboard event fire in the sequence: keydown → (keypress) → input → keyup DOM Level 4 specification makes keypress event obsolete: browsers should continue to implement it to keep compatibility with old code The input event is part of HTML5 FormEvents When you want to know which key was pressed use keydown or keypress events's keyCode property.

DOM Level 3 MutationEvent: occur for a modification of DOM structure or DOMnode

type	event description
DOMNodeInserted
DOMNodeRemoved
DOMSubtreeModified
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument
Usage: Adding DOM Mutation event listeners to a document can lead to a significant performance penalty. (IE9) They have been deprecated in favor of DOM4 Mutation Observers.

W3C HTML5 Events

HTML5 FormEvents: occur when a user interacts with a form element

event type	event description
input	Fires when value in <input> or <textarea> or element with contenteditable attribute has changed (IE9+)
change	Fires when user makes a change in the value of select box, checkbox or radio button ha changed (IE9+)
submit	Fire on the node representing the <form> element, when the form is submitted.
reset	User clicks on reset button
cut	User cuts content from a form field
copy	User copies content from a form field
paste	User pastes content into a form field
select	User selects text in a form field
Usage: Do not use click event in place of the change event, because user may not be using mouse.

HTML5 events with different interfaces: occur when window's or document's state changes

type	event description	target
DOMContentLoaded	Event fires when the DOM tree is formed, but linked resources (CSS, JS, images) are still being loaded. (IE9+)	document, window
readystatechange	Fires fires when document's readyState property is changed. (Can be used as an alternative to the DOMContentLoaded for olderIE)	document, XMLHTTPRequest
hashchange	Event fires when the URL hash changes. URL's hashs AKA anchors link parts of a document within a page. (IE8+)	window
beforeunload	Event fires before the page is unloaded. It shows a dialog box to the user.	window

Example: (HTML5 FormEvent) input event

See the Pen input event with textarea by Massimiliano De Simone (@maxdesimone) on CodePen.

Example: (DOM4 FocusEvent) blur and (HTML5 FormEvents) change events

See the Pen JS events: Form and Focus Event Interfaces by Massimiliano De Simone (@maxdesimone) on CodePen.

Example: (DOM2 MouseEvent) mouseover, mouseout and mousemove events

See the Pen JS events: three mouse events by Massimiliano De Simone (@maxdesimone) on CodePen.