/

HTML / CSS / JavaScript Tutorial

HTML Event attributes

[this page | pdf | back links]

Different HTML elements can have attributes that specify how they should be formatted or interpreted or allow further characterisation of the element, which can be either standard attributes or event attributes. Event attributes indicate what scripts should be run if an event occurs (e.g. the mouse button is clicked, an element is dragged, dropped or copied, etc). HTML5 added many more possible event attributes that can be assigned to HTML elements. In each case the value of the attribute is a script to be run when an event occurs.

 

HTML event attributes include:

 

Event Attribute

Description of event

Applicable to

 

More

animationend

When CSS animation ends

Any element with a CSS animation

Here

animationiteration

When CSS animation is repeated

Any element with a CSS animation

Here

animationstart

When CSS animation starts

Any element with a CSS animation

Here

onabort

If document or media loading is aborted

<audio>, <embed>, <input> (if type = image), <img>, <object>, <video>

Here

onafterprint

After document printed

<body>

Here

onbeforeprint

Before document printed

<body>

Here

onbeforeunload

Just before document unloaded

<body>

Here

onblur

When element loses focus

All visible elements

Here

oncanplay

When file ready to start playing (i.e. when buffered enough to begin)

<audio>, <embed>, <object>, <video>

Here

oncanplaythrough

When file ready to be played all way to end without pausing for buffering

<audio>, <video>

Here

onchange

When element value changed

All visible elements

Here

onclick

When element clicked

All visible elements

Here

oncontextmenu

When context menu triggered

All visible elements

Here

oncopy

When content of element being copied

All visible elements

Here

oncuechange

When cue changes

<track>

Here

oncut

When content of element being cut

All visible elements

Here

ondblclick

When element is double-clicked

All visible elements

Here

ondrag

When element being dragged

All visible elements

Here

ondragend

At end of drag operation

All visible elements

Here

ondragenter

When element has been dragged to a valid drop target

All visible elements

Here

ondragleave

When element leaves a valid drop target

All visible elements

Here

ondragover

When element being dragged over a valid drop target

All visible elements

Here

ondragstart

At start of drag operation

All visible elements

Here

ondrop

When dragged element is being dropped

All visible elements

Here

ondurationchange

When length of media changes

<audio>, <video>

Here

onemptied

When media unexpectedly becomes unavailable

<audio>, <video>

Here

onended

When media has reached end

<audio>, <video>

Here

onerror

When an error occurs

<audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video>, EventSource objects

Here

onfocus

When element gets focus

All visible elements

Here

onfocusin

When element is about to get focus (similar to onfocus except also bubbles)

All visible elements

Here

onfocusout

When element is about to lose focus (similar to onblur except also bubbles)

All visible elements

Here

onhashchange

When there has been changes to the anchor part of the URL

<body>

Here

oninput

When element gets user input

All visible elements

Here

oninvalid

When element is invalid

All visible elements

Here

onkeydown

When user is pressing key

All visible elements

Here

onkeypress

When user presses a key

All visible elements

Here

onkeyup

When user releases a key

All visible elements

Here

onload

When element finishes loading

<body>, <iframe>, <img>, <input>, <link>, <script>, <style>

Here

onloadeddata

When media data is loaded

<audio>, <video>

Here

onloadedmetadata

When metadata (dimensions, duration, …) loaded

<audio>, <video>

Here

onloadstart

Just before loading starts

<audio>, <video>

Here

onmessage

When message is triggered

For handling errors

Here

onmousedown

When mouse button is pressed down on an element

All visible elements

Here

onmouseenter

When mouse pointer moves over an element

All visible elements

Here

onmouseleave

When mouse pointer moves out of an element

All visible elements

Here

onmousemove

For as long as mouse pointer is moving over an element

All visible elements

Here

onmouseout

When mouse pointer moves out of an element

All visible elements

Here

onmouseover

When mouse pointer moves over an element

All visible elements

Here

onmouseup

When mouse button is released over an element

All visible elements

Here

onmousewheel

When mouse wheel is being scrolled over an element (depreciated: use onwheel instead)

All visible elements

Here

onoffline

When browser starts to work offline

<body>

Here

ononline

When browser starts to work online

<body>

Here

onopen

When a connection to an event source is opened

An EventSource object

Here

onpagehide

When user navigates away from a page

<body>

Here

onpageshow

When user navigates to a page

<body>

Here

onpaste

When user pastes content in an element

All visible elements

Here

onpause

When media is paused

<audio>, <video>

Here

onplay

When media is ready to start playing

<audio>, <video>

Here

onplaying

When media has actually started playing

<audio>, <video>

Here

onpopstate

When window’s history changes

<body>

Here

onprogress

When browser is in process of getting media data

<audio>, <video>

Here

onratechange

When playback rate changes (e.g. user switches to fast forward)

<audio>, <video>

Here

onreset

When reset button in a form is clicked

<form>

Here

onresize

When browser window is being resized

<body>

Here

onscroll

When element’s scrollbar is being scrolled

All visible elements

Here

onsearch

When user writes something in search field (for an <input> element of type = search)

<input>

Here

onseeked

When seeking attribute is set to false (i.e. seeking finished)

<audio>, <video>

Here

onseeking

When seeking attribute is set to true (i.e. seeking is active)

<audio>, <video>

Here

onselect

When element gets selected

All visible elements

Here

onshow

When <menu> element is shown as a context menu

<menu>

Here

onstalled

When browser is unable to fetch media data (for whatever reason)

<audio>, <video>

Here

onstorage

When web storage area is updated

<body>

Here

onsubmit

When a form is submitted

<form>

Here

onsuspend

When fetching media data is stopped before completely loaded (for whatever reason)

<audio>, <video>

Here

ontimeupdate

When playing position has changed (e.g. user fast forwards to new position in media)

<audio>, <video>

Here

ontoggle

When user opens or closes <details> element

<details>

Here

ontouchcancel

When touch is interrupted

Touch-sensitive elements

Here

ontouchend

When finger is removed from touch screen

Touch-sensitive elements

Here

ontouchmove

When finger is dragged across touch screen

Touch-sensitive elements

Here

ontouchstart

When finger is placed on touch screen

Touch-sensitive elements

Here

onunload

When page has unloaded (or browser window closed)

<body>

Here

onvolumechange

When volume changed (or muted)

<audio>, <video>

Here

onwaiting

When media has paused but is expected to resume (e.g. media has paused to buffer more data)

<audio>, <video>

Here

onwheel

When mouse wheel rolls up or down over an element

All visible elements

Here

transitionend

When CSS transition ends

Any element with a CSS transition

Here

 

Most of these event attributes are new in HTML 5. The ones that are not are: onabort, onblur, onchange, onclick, oncopy, oncut, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpaste, onsearch, onselect, onsubmit and onunload.

 


NAVIGATION LINKS
Contents | Prev | Next | HTML Attributes


Desktop view | Switch to Mobile