HTML5 is a format for a text file, which makes pretty stuff happen to the text when viewed in an HTML5 browser. For a complete explanation, see the full picture.

In this article I want to talk about the events that make HTML5 dynamic. Events in HTML5 enrich the interactive behavior of the web. Some of these events are exposed in CSS pseudo-classes (or CSS pseudo-elements), so I may skip javascript and use CSS to simplify creation of commonly desired dynamic behaviors.

Besides the Event Attributes, HTML5 elements also share the Global Attributes.

Except where specified, the following events should be applicable to all HTML5 elements, and the document and window objects of each document.

These events may be added in a few different ways:

addEventListener
I strongly prefer addEventListener for greatest control, and versatile use cases. The name of the event is passed as a string and omits the "on" prefix. The first parameter to the function is the event object. Listeners may be removed via removeEventListener.

Element.addEventListener("click", doSomething, false);
html5 attribute
I may use inline html5 attribute syntax which requires the "on" prefix to the event name. The special variable names this and event are defined in the context of the html5 element automatically.
Click here
javascript attribute
My least favorite way to add an event. Just set the javascript property on the element to a function.
Element.onclick = doSomething;

Pointer events

I may attach scripts to pointer events on any HTML5 element.

click
dblclick
Standard events involving use of the left-click anywhere within an element.
mousedown
mouseup
Standard events involving use of a left, right, or middle click anywhere within an element. Right-click may be detected via event.button == 2.
mousewheel
Standard event detecting use of the mouse wheel.
mouseenter
mouseleave
These events track the state of the :hover CSS pseudo-class.
mouseout
mouseover
Like mouseenter and mouseleave but can bubble from a child element.
mousemove
Standard event that can fire at an alarming rate. For sake of performance, I avoid complexity in code size and number of event listeners that I map.

Touch events

I may attach scripts to touch events on any HTML5 element. These events involve a touch surface and are designed for multi-touch.

touchstart
Standard event for when a touch is initiated on a touch surface.
touchend
Standard event for when a touch is ended on a touch surface.
touchcancel
Standard event for when a touch is cancelled, usually by too many touches or leaving the window.
touchmove
Standard event that can fire at an alarming rate. For sake of performance, I avoid complexity in code size and number of event listeners that I map.

Keyboard events

These global events can be fired at the focused element or else the root element.

keydown
keypress
keyup

Media events

The following global event attributes can be fired from audio and video elements. Several of these events can also be fired from the implicit MediaController object if a mediagroup attribute is defined.

abort
canplay
canplaythrough
durationchange
emptied
ended
loadeddata
loadedmetadata
loadstart
pause
play
playing
progress
ratechange
seeked
seeking
stalled
suspend
timeupdate
volumechange
waiting

Field events

The following global events may fire from a form or its field elements such as input and select elements.

change
input
invalid
Applicable to field elements.

The form element has the following additional event attributes.

reset
submit
Fires when a reset or submit action is initiated on a form.

Track events

The following events pertain to text tracks associated with media elements.

addtrack
change
cuechange
enter
exit
removetrack

Drag events

The following events are applicable to any element with the global attribute draggable=true.

dragstart
drag
dragenter
dragleave
dragover
drop
dragend
These events fire at various stages of the drag operation.
select
Fires when text has been selected (via dragging the cursor). Once selected, text is draggable by default. This event aligns with the ::selection CSS pseudo-element.

Miscellaneous global events

cancel
I really cannot figure from the HTML5 recommendation what this event does.
contextmenu
show
Non-standard events involving the context menu accessed via right-click.
toggle
Non-standard event when toggling a details element.

Focus events

Global attributes, except on the body element these attributes act in proxy for the whole window or document. They can also be attached directly to the document or window in a script. For example, window.addEventListener("event", callback, false)

blur
focus
These events track the state of the :active or :focus CSS pseudo-class.
resize
This event tracks resize of a document view.
scroll
This event tracks use of the scroll bar on a document view.

Content load events

Global attributes for any element. On the body element, these attributes act in proxy for the whole window or document.

abort
error
load
Whether the load was aborted before completion, had an error in networking or scripting, or was loaded successfully.

The document element has the following additional event handlers (but has no corresponding HTML5 attribute). These events can be registered via document.addEventListener or xhr.addEventListener function calls.

readystatechange
DOMContentLoaded

More Window events

The body element exposes the following additional event attributes for the window. These events can be registered via window.addEventListener function call.

afterprint
beforeprint
beforeunload
hashchange
message
offline
online
pagehide
pageshow
popstate
storage
unload

YES!! I have survived this exposé on how to watch events in HTML5 documents, and I hope you have too.

Here is a demo of click and move events.

Click me Tap me Sticky