HTML Event Attributes: A Comprehensive Reference Guide

This reference provides a complete list of HTML event attributes, categorized by type (window, form, keyboard, mouse, drag, clipboard, media), enabling you to create interactive and dynamic web pages. Learn how to make your HTML responsive to user actions!

HTML Event Attributes

Making Your HTML Interactive with Events

HTML allows you to trigger actions in a web browser using events. For example, you can run a JavaScript function when a user clicks on an element. This makes your web pages dynamic and responsive.

To learn more about event programming, check out our JavaScript tutorial.

The following sections list common event attributes you can add to HTML elements to define these actions. The value for each attribute is typically a JavaScript function or code snippet.

Window Event Attributes

These events are triggered for the <body> or <html> tag (the window object):

Attribute	Value	Description
`onafterprint`	`script`	Runs after the document is printed.
`onbeforeprint`	`script`	Runs before the document is printed.
`onbeforeunload`	`script`	Runs when the document is about to be unloaded.
`onerror`	`script`	Runs when an error occurs.
`onhashchange`	`script`	Runs when the anchor part of a URL changes.
`onload`	`script`	Fires after the page finishes loading.
`onmessage`	`script`	Runs when a message event is triggered.
`onoffline`	`script`	Runs when the browser goes offline.
`ononline`	`script`	Runs when the browser goes online.
`onpagehide`	`script`	Runs when a user navigates away from a page.
`onpageshow`	`script`	Runs when a user navigates to a page.
`onpopstate`	`script`	Runs when the window's history changes.
`onresize`	`script`	Fires when the browser window is resized.
`onstorage`	`script`	Runs when a Web Storage area is updated.
`onunload`	`script`	Fires once a page has unloaded (or the browser window has been closed).

Form Events

These events are triggered by actions within an HTML form (apply to most HTML elements, but are most commonly used in form elements):

Attribute	Value	Description
`onblur`	`script`	Fires when an element loses focus.
`onchange`	`script`	Fires when the value of an element changes.
`oncontextmenu`	`script`	Runs when a context menu is triggered.
`onfocus`	`script`	Fires when an element gains focus.
`oninput`	`script`	Runs when an element receives user input.
`oninvalid`	`script`	Runs when an element is invalid.
`onreset`	`script`	Fires when the Reset button in a form is clicked.
`onsearch`	`script`	Fires when the user types in a search field (`<input type="search">`).
`onselect`	`script`	Fires after text is selected in an element.
`onsubmit`	`script`	Fires when a form is submitted.

Keyboard Events

Attribute	Value	Description
`onkeydown`	`script`	Fires when a key is pressed down.
`onkeypress`	`script`	Fires when a key is pressed.
`onkeyup`	`script`	Fires when a key is released.

Mouse Events

Attribute	Value	Description
`onclick`	`script`	Fires on a mouse click.
`ondblclick`	`script`	Fires on a mouse double-click.
`onmousedown`	`script`	Fires when a mouse button is pressed down.
`onmousemove`	`script`	Fires when the mouse moves over an element.
`onmouseout`	`script`	Fires when the mouse moves out of an element.
`onmouseover`	`script`	Fires when the mouse moves over an element.
`onmouseup`	`script`	Fires when a mouse button is released.
`onmousewheel`	`script`	Deprecated. Use `onwheel` instead.
`onwheel`	`script`	Fires when the mouse wheel rolls.

Drag Events

Attribute	Value	Description
`ondrag`	`script`	Runs when an element is dragged.
`ondragend`	`script`	Runs at the end of a drag operation.
`ondragenter`	`script`	Runs when an element is dragged to a valid drop target.
`ondragleave`	`script`	Runs when an element leaves a valid drop target.
`ondragover`	`script`	Runs when an element is dragged over a valid drop target.
`ondragstart`	`script`	Runs at the start of a drag operation.
`ondrop`	`script`	Runs when a dragged element is dropped.
`onscroll`	`script`	Runs when an element's scrollbar is scrolled.

Clipboard Events

Attribute	Value	Description
`oncopy`	`script`	Fires when the user copies element content.
`oncut`	`script`	Fires when the user cuts element content.
`onpaste`	`script`	Fires when the user pastes content into an element.

Media Events

These events are triggered by media like videos, images, and audio (apply to all HTML elements, but are most common in media elements like <audio>, <video>, <img>, etc.).

See our HTML Audio and Video DOM Reference for more details.

Attribute	Value	Description
`onabort`	`script`	Runs on abort.
`oncanplay`	`script`	Runs when a file is ready to start playing.
`oncanplaythrough`	`script`	Runs when a file can play to the end without pausing.
`oncuechange`	`script`	Runs when the cue changes in a `<track>` element.
`ondurationchange`	`script`	Runs when the media's length changes.
`onemptied`	`script`	Runs when the media file becomes unavailable.
`onended`	`script`	Runs when the media reaches the end.
`onerror`	`script`	Runs when an error occurs during file loading.
`onloadeddata`	`script`	Runs when media data is loaded.
`onloadedmetadata`	`script`	Runs when metadata (like dimensions and duration) are loaded.
`onloadstart`	`script`	Runs when the file begins to load.
`onpause`	`script`	Runs when the media is paused.
`onplay`	`script`	Runs when the media is ready to start playing.
`onplaying`	`script`	Runs when the media starts playing.
`onprogress`	`script`	Runs while the browser is loading media data.
`onratechange`	`script`	Runs when the playback rate changes.
`onseeked`	`script`	Runs when seeking ends.
`onseeking`	`script`	Runs when seeking is active.
`onstalled`	`script`	Runs when the browser can't fetch media data.
`onsuspend`	`script`	Runs when fetching media data is stopped.
`ontimeupdate`	`script`	Runs when the playing position changes.
`onvolumechange`	`script`	Runs when the volume changes.
`onwaiting`	`script`	Runs when the media pauses to buffer.

Miscellaneous Events

Attribute	Value	Description
`ontoggle`	`script`	Fires when a `<details>` element is opened or closed.