What Are HTML Event Attributes?

HTML event attributes are special global attributes used to handle user interactions or browser-triggered events directly within your HTML elements. These attributes allow you to execute JavaScript functions when specific actions—like clicking a button, loading a page, or pressing a key—occur on the webpage. This helps add interactivity to otherwise static HTML structures, making your web pages more dynamic and responsive.

Here’s what makes HTML event attributes important:

  • Built-in interactivity: Trigger JavaScript functions without external scripts by assigning event attributes to HTML tags.
  • Broad compatibility: Supported across all modern browsers and apply to most HTML5 elements, including global usage.
  • Efficient behavior control: Handle real-time events like mouse clicks, keypresses, form submissions, or media playback.
  • Inline or external: Define logic directly in the attribute or point to functions in an external JavaScript file.
  • Grouped by functionality: Event attributes are categorized by context such as mouse, keyboard, clipboard, form, drag, media, or window events.

Window Event Attributes

There are 16 HTML window event attributes commonly used with the <body> tag. The complete list is provided below.

16 Window Event Attributes
Attribute Value Description
onafterprint script A script defined by onafterprint attribute runs after a document prints.
onbeforeprint script A script defined by onbeforeprint attribute runs before a document prints.
onbeforeunload script The script defined using onbeforeunload attribute runs when the document is about to be unloaded
onerror script A script triggers defined in onerror when some error occurs.
onhashchange script A script in onhashchange attribute runs if there is some change in the URL
onload script A script loads defined in onload attribute after an element is finished loading.
onoffline script When the browser starts working offline, the onoffline attribute triggers the script.
ononline script Some script triggers when the browser starts working online using ononline attribute.
onpagehide script On navigating away from the page, the script inside the onpagehide attribute runs.
onpageshow script On navigating to the page, the script inside the onpageshow attribute runs.
onpopstate script Some script runs when the windows history changes.
onresize script Some script triggers on resizing the window of the browser.
onshow script Triggered when a context menu or pop-up element becomes visible.
ontoggle script Fires when a <details> element is opened or closed.
onstorage script When a Web Storage area is updated, a script runs.
onunload script When the browser window is closed, some script runs.

Form Event Attributes

A total of 10 HTML event attributes are associated with form elements and are listed below for quick reference.

10 Form Event Attributes
Attribute Value Description
onblur script When the element loses focus, the script runs defined by onblur HTML attribute.
onchange script When the content of the element is changed, the script runs set by the onchange attribute.
oncontextmenu script A script contained in oncontextmenu attribute runs when a context menu is triggered
onfocus script When the element gets focus, the script runs defined by the onblur HTML attribute.
oninput script When an element gets an input by the user, a script defined in oninput attribute triggers.
oninvalid script A script runs if the element gets invalid.
onreset script Some script triggers on pressing the reset button in a form.
onsearch script Some script runs while the user writes something in the search field.
onselect script When an element gets selected, the onselect attribute triggers some script.
onsubmit script Upon form submission, script triggers.

Keyboard Event Attributes

Listed below are 3 HTML event attributes that handle keyboard interactions in web pages.

3 Keyboard Event Attributes
Attribute Value Description
onkeydown script While a user pressing a key, a script defined in onkeydown attribute triggers.
onkeypress script When a user presses a key, a script defined in onkeypress attribute triggers.
onkeyup script While a user releasing a key, a script defined in onkeyup attribute triggers.

Mouse Event Attributes

Here are 9 HTML event attributes commonly used to handle mouse-related interactions and button events.

9 Mouse Event Attributes
Attribute Value Description
onclick script When someone clicks the element, the script defined by onclick runs immediately.
ondblclick script If the user double clicks the content of an element, the script of the ondblclick attribute runs.
onmousedown script While a user presses a mouse button on an element, a script defined in the onmousedown attribute triggers.
onmousemove script Some script defined inside the onmousemove attribute runs as long as the mouse is moving.
onmouseout script Some script defined inside the onmouseout attribute runs when the mouse pointer moves out of some element.
onmouseover script A script defined inside the onmouseover attribute runs when the mouse pointer moves over some element.
onmouseup script While a user releases a mouse button on an element, a script defined in the onmouseup attribute triggers.
onmousewheel script When the mouse wheel scrolls over an element, a script triggers.
onwheel script Upon scrolling from an element up or down, a script triggers.

Drag Event Attributes

There are 8 HTML event attributes specifically used for handling drag-and-drop interactions within HTML elements.

8 Drag Event Attributes
Attribute Value Description
ondrag script A script runs on the drag of an element. The script is defined using the ondrag attribute.
ondragend script A script runs after the drag of an element terminates. The script is defined using the ondragend attribute.
ondragenter script When a user drags an element to a valid drop target, a script in the ondragenter attribute runs.
ondragleave script When an element leaves a valid drop target, a script in the ondragleave attribute runs.
ondragover script If an element drags over a valid drop target, a script in the ondragover attribute runs.
ondragstart script A script runs after the drag of an element starts. The script is defined using the ondragstart attribute.
ondrop script On the drop of an element to a valid drop target, a script in ondrop attribute runs.
onscroll script When the scrollbar of an element is being scrolled, the script inside the onscroll attribute runs.

Clipboard Event Attributes

A total of 3 HTML event attributes are associated with clipboard operations like copy, cut, and paste actions.

3 Clipboard Event Attributes
Attribute Value Description
oncopy script If the user copies the content of an element, the script of the oncopy attribute runs.
oncut script If the user cuts the content of an element, the script of the oncut attribute runs.
onpaste script When the user pastes some content in an element, a script inside the onpaste attribute runs.

Media Event Attributes

A total of 23 HTML event attributes related to media elements like <video> or <audio> are listed below.

23 Media Event Attributes
Attribute Value Description
onabort script The script inside onabort attribute runs or abort media loading.
oncanplay script If a file is ready to play, the script runs as defined by the oncanplay attribute.
oncanplaythrough script If a file is ready to play until the end without pausing for buffering, the script runs as defined by the oncanplaythrough attribute.
oncuechange script Fires when the cue changes in a <track> element.
ondurationchange script On change of the duration of the media, a script runs defined by the ondurationchange attribute.
onemptied script The script in the onemptied attribute triggers when the video or audio file becomes unavailable due to some error or fault.
onended script At the end of the video or audio, the script in onended attribute triggers.
onerror script A script triggers defined in onerror when some error occurs.
onloadeddata script A script loads defined in onloadeddata attribute after a media in video or audio element is finished loading.
onloadedmetadata script When metadata loading is finished like width, height, etc. The script defined inside the onloadedmetadata triggers.
onloadstart script Some script loads defined in the onloadstart attribute when an element starts loading.
onpause script When the video or the audio pauses by the user or for some other reason, the script inside the onpause attribute runs.
onplay script While the video or the audio starts playing, the script inside the onplay attribute runs.
onplaying script While the video or the audio has started playing, the script inside the onplaying attribute runs.
onprogress script When the browser is working to collect the media data, the onprogress attribute triggers the script.
onratechange script When the playback speed changes, a script inside onratechange runs each time.
onseeked script Some script runs when the user seeks a new position on the player for audio or video.
onseeking script A script runs when the user seeks a new position on the player for audio or video.
onstalled script While the browser is unable to fetch the resourced object due to some reason, a script runs defined by onstalled attribute.
onsuspend script When fetching of media is stopped due to some reason in between, a script runs using onsuspend attribute.
ontimeupdate script When a user fasts forward to a new position in the player, a script runs by ontimeupdate attribute.
onvolumechange script A script runs each time the volume of the script changes.
onwaiting script When a media pauses and chances of resuming, a script triggers.

HTML Attributes Reference

For a complete overview of all 270+ HTML attributes, visit the HTML5 attribute reference.