HTML Event Attributes

Event attributes are attributes that bind an event to a JavaScript event handler, which, in turn, can do something useful in response.

HTML Reference

Example

A <button>with an onclick event attribute.
Clicking the button will execute the JavaScript clickHandler function.

<button type="button" 
        onclick="clickHandler();">Click to say hi</button>

<script>
  let clickHandler = () => {
     alert("I was clicked to say hi!");
  }
</script>

First, let's review what an event is.


Events

An event is a notification that is triggered when something changes in the browser.

For example, when a user clicks a button, a click event occurs.

Or when the browser is resized, a resize event occurs.


Event Attributes

With event attributes these events are directed to JavaScript which then responds to the event.

All event attributes start with 'on', like onclick, onchange, onsubmit, etc. They are listed below.

Events and event attributes fall into several categories. They are listed below.


Event Categories

In the browser, several event categories can be identified:

Event Category Description
Window Related to the browser and JavaScript window object.
Form Related to data entry and form submission.
Keyboard Related to user interactions with the keyboard.
Mouse Related to user interactions with the mouse.
Clipboard Related to user interactions with the clipboard.
Drag and Drop Related to page elements that are moved around by the user.
Media Related to multi media elements and their files.

We'll review each category below.

Window event attributes

Window events are related to the browser and the window object.
The event attributes are applied to the <body> tag.

Attribute Description
onafterprint Runs the script after the page is printed.
onbeforeprint Runs the script before the page is printed.
onbeforeunload Runs the script before a page is unloaded.
onerror Runs the script when an error occurs.
onhashchange Runs the script when the anchor part in the page URL is changed.
onload Runs the script when page load has completed.
onmessage Runs the script when a message occurs.
onoffline Runs the script when the browser loses network connection.
ononline Runs the script when the browser is connected to the network.
onpagehide Runs the script when user navigates away from the page.
onpageshow Runs the script when the current page is focused.
onpopstate Runs the script when the browsers's active history is changed.
onresize Runs the script when the browser window is resized.
onstorage Runs the script when web storage is updated.
onunload Runs the script when the page is unloaded or the browser closes.

Form event attributes

Form events are related to data entry and form submission.
The event attributes are applied to forms and input controls.

Attribute Description
onblur Runs the script when input element loses the focus.
onchange Runs the script when the value of the element is changed.
onfocus Runs the script when the element gets focus.
oninput Runs the script when the user enters input to the element.
oninvalid Runs the script when the value does not meet validation.
onreset Runs the script when user resets the input element values.
onsearch Runs the script when a search field receives input.
onselect Runs the script when the user has selected some text.
onsubmit Runs the script when a form is submitted.

Keyboard event attributes

Keyboard events are related to user interactions with the keyboard.
The event attributes are applied to input controls.

Attribute Description
onkeydown Runs the script when the user presses a key on the keyboard.
onkeyup Runs the script when the user releases the currently pressed key.
onkeypress Runs the script when the user presses a key that displays a character.

Mouse event attributes

Mouse events are related to user interactions with the mouse.
The event attributes are applied to a wide variety of elements.

Attribute Description
onclick Runs the script when a mouse click occurs on the element.
ondblclick Runs the script when a mouse double-click occurs on the element.
onmousedown Runs the script when the mouse button is pressed on the element.
onmousemove Runs the script when the mouse pointer moves over the element.
onmouseout Runs the script when the mouse moves outside the element.
onmouseover Runs the script when the mouse moves onto the element.
onmouseup Runs the script when the mouse button is released.
onwheel Runs the script when the mouse wheel rolls up or down on the element
onmousewheel Deprecated. Use the onwheel attribute.

Clipboard event attributes

Clipboard events are related to user interactions with the clipboard.
The event attributes are applied to a wide variety of controls.

Attribute Description
oncopy Runs the script when content is copied to the clipboard.
oncut Runs the script when content is cut to the clipboard.
onpaste Runs the script when content is pasted from the clipboard.

Drag and Drop event attributes

Drag and drop events are related to page elements that are moved around by the user with the mouse.
The event attributes are applied to a wide variety of controls.

Attribute Description
ondrag Runs the script when an element is dragged.
ondragend Runs the script when the drag operation had ended.
ondragenter Runs the script when a dragged element enters a valid drop target.
ondragleave Runs the script when a dragged element leaves a valid drop target.
ondragover Runs the script when a dragged element is moving over a valid drop target.
ondragstart Runs the script when the element is started being dragged.
ondrop Runs the script when the dragged element is dropped.
onscroll Runs the script when a scrollbar is being moved up or down.
ontoggle Runs the script when a detail control is opened or closed.

Media event attributes

Media events are related to multi media interactions and their files.
The event attributes are applied to audio and video controls.

Attribute Description
onabort Runs the script when media playback is aborted.
oncanplay Runs the script when the media file is ready to play.
oncanplaythrough Runs the script when the media file is ready to play without buffering or stopping.
oncuechange Runs the script when the text cue of the <track> element is changed.
ondurationchange Runs the script when the media file duration is changed.
onemptied Runs the script when an error occurs and the file becomes unavailable.
onended Runs the script when the media file reaches its end point.
onerror Runs the script when an error occurrs during fetching media data.
onloadeddata Runs the script when media data has been loaded.
onloadedmetadata Runs the script when metadata of media file has been loaded.
onloadstart Runs the script when loading of media file starts.
onpause Runs the script when media playback is paused.
onplay Runs the script when media file starts playing after being paused.
onplaying Runs the script when media file starts playing.
onprogress Runs the script when the browser is getting the media data.
onratechange Runs the script when playback speed changes.
onseeked Runs the script when seek operation has ended and seeking attribute is false.
onseeking Runs the script when seek operation has started and seeking attribute is true.
onstalled Runs the script when browser unexpectedly stopped fetching the data media.
onsuspend Runs the script when fetching media data is intentionally stopped.
ontimeupdate Runs the script when playback position changes, for example, fast forwarding.
onvolumechange Runs the script when media volume changes (muted or unmuted).
onwaiting Runs the script when playback pauses to load more data.

You may also like

Guides