Global events

Event are mechanisms that allow interaction between the document's elements and some events related to the system and user's actions. These events can be associated to fragments of code written in a client-side language (like JavaScript) that will carry out their process when the conditions inherent to the event they're associated with, are met. For example, a program could be ready to launch an animation in the page, when the user clicks over an element.

In HTML5 there's a number of events defined for all elements in the standard, called gobal events. Nonetheless, many of these events will have effect only on a few elements. For example, there are many events that will only be fired for video and audio elements, like oncanplay, onpause and onloadeddata.

List of global events

onabort

This element's loading process has been aborted by the user.

onautocomplete

This form control has been autofilled by the browser.

The autofill operation is carried out by supporting browsers to increase accessibility and ease of use, and consists in filling controls with known values taken from user's data or previous inputs.

onautocompleteerror

The autofill operation in this form control has failed. This failure can happen because the user cancelled the operation, because the control was disabled or because the data doesn't meet the control's requirements.

onblur

This element has lost the focus.

Example

<p>When you deselect this control, the color of its container will change: <input type="text" onblur="changeColor(this.parentNode)"></p>

When you deselect this control, the color of its container will change:

oncancel

The user has opted to cancel the action presented by this dialog box. This could be caused by the user, if he has pressed the CANCEL button or the ESCAPE key, for example.

oncanplay

This video or audio can resume its playback, but presumably, the media stream will need to be paused for buffering before its completely played.

The firing of this event is based merely on estimations. There's no certainty that the playback will necessarily have to be stopped for buffering operations.

oncanplaythrough

This video or audio can resume its playback, and will presumably be completely played without the need of being paused for buffering operations.

The firing of this event is based merely on estimations. There's no certainty that the playback will be completed without the need of at least a buffering pause.

onchange

This form control's value has been changed since it last gained focus, and the focus has been passed from this to another element.

Example

<p>When you edit and then deselect this control, the color of its container will change: <input type="text" onchange="changeColor(this.parentNode)"></p>

When you edit and then deselect this control, the color of its container will change:

onclick

The user pressed and then released a mouse button, while its cursor was over this element.

This event is also fired at an element before its activation, when triggered from another device like, for example, a keyboard.

Example

<p onclick="changeColor(this)">Clicking this paragraph will change its background color.</p>

Clicking this paragraph will change its background color.

onclose

The user has closed this dialog.

oncontextmenu

The user has called the context menu for this element, most likely, by clicking it with the right button of the mouse.

oncuechange

The current cue on this track has changed. This happens when, for example, the next line of the subtitles in a video is shown.

ondblclick

The user pressed and the released a mouse button twice (consecutively and in a short period of time), while its cursor was over this element.

Example

<p ondblclick="changeColor(this)">Double-clicking this paragraph will change its background color.</p>

Double-clicking this paragraph will change its background color.

ondrag

This element is currently being dragged by the user.

This event will be fired repeatedly during the dragging operation. Authors should be aware of behavior and write their scripts accordingly, having special consideration for execution time.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

Example

<p draggable="true" ondrag="changeColor(this)">Drag this paragraph and its background color will be constantly changing.</p>

Drag this paragraph and its background color will be constantly changing.

ondragend

This element's dragging operation has concluded.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

Example

<p draggable="true" ondragend="changeColor(this)">Drag this paragraph, and when you're done, its background color will change.</p>

Drag this paragraph, and when you're done, its background color will change.

ondragenter

An element is being dragged and entered the area ocuppied by the element containing this event.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

Example

<p draggable="true">Drag this paragraph over the next one and its background color will change when you enter it.</p>
<p ondragenter="changeColor(this)">This paragraph will change its background color if you drag an element over it.</p>

Drag this paragraph over the next one and its background color will change when you enter it.

This paragraph will change its background color if you drag an element over it.

ondragexit

An element is being dragged and has been just moved outside the area ocuppied by the element containing this event.

This event has the same functionallity as ondragleave and is prone to become obsolete in future versions of the standard. Use the ondragleave event instead.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

ondragleave

An element is being dragged and has been just moved outside the area ocuppied by the element containing this event.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

Example

<p draggable="true">Drag this paragraph over the next one and its background color will change when you leave it.</p>
<p ondragleave="changeColor(this)">This paragraph will change its background color if you drag an element outside of it.</p>

Drag this paragraph over the next one and its background color will change when you leave it.

This paragraph will change its background color if you drag an element outside of it.

ondragover

An element is being dragged over the element containing this event.

This event will be fired repeatedly during the dragging operation. Authors should be aware of behavior and write their scripts accordingly, having special consideration for execution time.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

Example

<p draggable="true">Drag this paragraph over the next one and its background color will change as you move over it.</p>
<p ondragover="changeColor(this)">This paragraph will change its background color if you drag an element through it.</p>

Drag this paragraph over the next one and its background color will change as you move over it.

This paragraph will change its background color if you drag an element through it.

ondragstart

The element is begining to be dragged (it's just been picked up).

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

Example

<p draggable="true" ondragstart="changeColor(this)">Drag this paragraph and its background color will change the moment you begin.</p>

Drag this paragraph and its background color will change the moment you begin.

ondrop

An element has been dropped in the area occupied by the element containing this event.

Browsers default handling of drag and drop operations doesn't allow HTML elements to be dropped inside each other. Authors trying to achieve this behavior should prevent the default action for this and the "ondragover" events.

Browser support for native drag and drop operations is incomplete. Authors may need to rely on scripts until support grows.

ondurationchange

The duration attribute on this video or audio has been updated.

onemptied

This video or audio has been taken back to its uninitialized state, either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running.

onended

This end of a video or audio has been reached.

onerror

The browser encountered errors that prevented it from properly loading this media resource.

onfocus

This element has gained the focus.

Example

<p>When you select this control, the color of its container will change: <input type="text" onfocus="changeColor(this.parentNode)"></p>

When you select this control, the color of its container will change:

oninput

The value of this form control has been changed.

This event is fired immediately after the change ocurred, in contrast with the "onchange" event, that waits until the element loses the focus to check if changes where made to its value.

Example

<p>When you change the text in this control, the background color of its parent wil change: <input type="text" oninput="changeColor(this.parentNode)"></p>

When you change the text in this control, the background color of its parent wil change:

oninvalid

The user filled this form control with data that doesn't meet the valid criteria and then tried to submit the form.

Besides having controls like number or e-mail checked, that have their own restictions about input data, authors may specify the criteria for deciding if a value is valid or not using the pattern attribute.

onkeydown

A key was pressed down while the element had the focus.

Example

<p>When you push a key while editting this control, the color of its container will change: <input type="text" onkeydown="changeColor(this.parentNode)"></p>

When you push a key while editting this control, the color of its container will change:

onkeypress

A key associated with a character was pushed down while this element had the focus.

In contrast with onkeydown and onkeyup, this event wont be fired by keys that aren't associated to input characters (most of them printable) like, for example, ALT, CTRL, INS and DEL.

Example

<p>When you push down a 'character' key while editting this control, the color of its container will change: <input type="text" onkeypress="changeColor(this.parentNode)"></p>

When you push down a 'character' key while editting this control, the color of its container will change:

onkeyup

A key has been released while this element had the focus.

Example

<p>When you release a key while editting this control, the color of its container will change: <input type="text" onkeyup="changeColor(this.parentNode)"></p>

When you release a key while editting this control, the color of its container will change:

onload

The browser has completed the load of the resource provided by this element.

onloadeddata

This video or audio data has been loaded enough to allow the browser to render it at the current playback position for the first time.

onloadedmetadata

The browser has just determined the duration and dimensions of this video or audio and the tracks are ready.

onloadstart

The lookup for media data of this video or audio has just begun.

onmousedown

The user pressed a mouse button, while its cursor was over this element.

Example

<p onmousedown="changeColor(this)">Pushing down your mouse button over this paragraph will change its background color.</p>

Pushing down your mouse button over this paragraph will change its background color.

onmouseenter

The mouse cursor has just entered this element boundaries.

This event will be fired only when the cursor enters this element and not when it enters any of its children. To catch the pointer entering this element as well as its children, use the onmouseover event.

Browser support for this attribute is yet incomplete. Authors may need to rely on scripts to provide this functionality until support grows.

Example

<p onmouseenter="changeColor(this)">Moving your mouse into this paragraph will make its background color change.</p>

Moving your mouse into this paragraph will make its background color change.

onmouseleave

The pointer device cursor has just moved out from this element boundaries.

This event will be fired only when the cursor goes out of this element and not when it goes out of any of its children. To catch the pointer leaving this element as well as its children, use the onmouseout event.

Browser support for this attribute is yet incomplete. Authors may need to rely on scripts to provide this functionality until support grows.

Example

<p onmouseleave="changeColor(this)">Moving your mouse out of this paragraph will make its background color change.</p>

Moving your mouse out of this paragraph will make its background color change.

onmousemove

The pointer device cursor is moving over this element.

This event will be fired repeatedly while the pointer moves over this element. Content authors should be aware of this fact and write their scripts accordingly, having special consideration for execution time.

Example

<p onmousemove="changeColor(this)">Moving your mouse over this paragraph will constantly change its background color.</p>

Moving your mouse over this paragraph will constantly change its background color.

onmouseout

The pointer device cursor has just moved out from this element (or any of its children) boundaries.

This event will be fired, not only when the cursor goes out of this element, but also whenever it goes out of any of its children. To catch the pointer leaving this element only, use the onmouseleave event.

Example

<p onmouseout="changeColor(this)">Moving your mouse out of this paragraph will make its background color change.</p>

Moving your mouse out of this paragraph will make its background color change.

onmouseover

The pointer device cursor has just entered this element (or any of its children) boundaries.

This event will be fired, not only when the cursor enters this element, but also whenever it enters any of its children. To catch the pointer entrance to this element only, use the onmouseenter event.

Example

<p onmouseover="changeColor(this)">Moving your mouse into this paragraph will make its background color change.</p>

Moving your mouse into this paragraph will make its background color change.

onmouseup

The user released the mouse button, while its cursor was over this element.

Example

<p onmouseup="changeColor(this)">Releasing the mouse button over this paragraph will change its background color.</p>

Releasing the mouse button over this paragraph will change its background color.

onmousewheel

The user rotated the wheel mechanism of the mouse while its cursor was over this element.

Example

<p onwheel="changeColor(this)">Rotating the mouse wheel over this paragraph will change its background color.</p>

Rotating the mouse wheel over this paragraph will change its background color.

onpause

The stream in this video or audio has been paused.

onplay

The browser initiated the video or audio playback for this element.

onplaying

Playback of this video or audio is ready to start after having been paused or delayed due to lack of media data.

onprogress

The browser is fetching media data for this video or audio.

onratechange

One of the attributes defaultPlaybackRate and playbackRate of this video or audio has changed.

onreset

This form control has been reset.

The reset operation is commonly carried out when the user presses a reset button, and makes all controls in the form take their initial values.

Example

<form onreset="changeColor(this)">
  <input type="text" value="Initial value">
  <input type="reset" value="Reset this form">
</form>

onresize

The size of this element has been changed.

This event can be fired repeatedly during a resize operation. Authors should keep this behavior in mind, as a heavy script can negatively affect the performance of the application.

This event has been made available for all HTML elements recently. Support provided by browsers is expected to be poor for elements other than the body.

Example

<p onresize="changeColor(this)">Changing the size of this paragraph will make its background color change.</p>

Changing the size of this paragraph will make its background color change.

onscroll

The contents of the element or document have been scrolled.

This event can be fired repeatedly during a scrolling operation. Authors should keep this fact in mind, as a heavy script can negatively affect the performance of the application.

Authors should consider that for this event to be fired, the element must be showing its contents in a scrollable viewport (commonly an iframe provided with scrollbars).

Example

<div onscroll="changeColor(this)" style="height: 6em; overflow: auto;">
  First line<br>Second line<br>Third line<br>Fourth line<br>
  Fifth line<br>Sixth line<br>Seventh line<br>Eighth line
</div>
First line
Second line
Third line
Fourth line
Fifth line
Sixth line
Seventh line
Eighth line

onseeked

The value of the seeking attribute changed to false, ending a seek operation on this video or audio.

onseeking

The value of the seeking attribute changed to true, and the seek operation on this video or audio is taking long enough that the browser has time to fire the event.

onselect

The user selected a piece of text in this form control.

Example

<p>When you select some text in this control, the color of its container will change: <input type="text" value="Text of this control" onselect="changeColor(this.parentNode)"></p>

When you select some text in this control, the color of its container will change:

onshow

User requested this popup menu to be shown.

onsort

The sorting of this table has been requested, but the action hasn't been carried out yet. The cancelation of this event would prevent the requested sorting operation.

onstalled

Despite the browser efforts to retrieve media data for this video or audio, no data is being received.

onsubmit

The user submitted the form.

The submit operation is commonly carried out when the user presses the submit button. This prepares the form to be sent to the processing agent specified in the action attribute.

Example

<form action="../form-result.php" onsubmit="changeColor(this, event)" target="_blank">
  <input type="text" name="field1" value="Initial value">
  <input type="submit" value="Submit this form">
</form>

onsuspend

The media data retrieving for this video or audio has been intentionally suspended by the browser although it didn't download the entire contents yet.

ontimeupdate

The playback position of this video or audio has changed.

This event could be fired either as part of normal playback, or due to a jump operation executed by the user or the program itself.

ontoggle

The state of this details element has changed (its contents have been hidden or shown).

This attribute is fairly new and, therefore, browser support is expected to be relatively poor.

onvolumechange

The value of either of the two attributes volume and muted of this video or audio has changed.

onwaiting

The playback of this video or audio has been paused because the data needed to continue is not yet available.