HTML Event Attributes are special attributes used to execute JavaScript code when a specific action or event occurs in the browser. These events can happen when a user clicks a button, types in an input field, moves the mouse, submits a form, or when a webpage finishes loading.
HTML events make webpages interactive and dynamic by allowing developers to respond to user actions instantly.
An HTML Event Attribute is added directly inside an HTML element to trigger JavaScript code whenever a particular event occurs.
Example of HTML Event Attribute
<button onclick="showMessage()">
Click Me
</button>
<script>
function showMessage() {
alert("Button Clicked");
}
</script>
In the above example, the onclick event runs JavaScript code when the button is clicked.
Below are the global event attributes that can be added to HTML elements to define event actions.
Window Event Attributes
Events triggered for the browser window object.
| Attribute | Value | Description |
|---|---|---|
onafterprint | script | Script to run after the document is printed |
onbeforeprint | script | Script to run before the document is printed |
onbeforeunload | script | Script to run before the document is unloaded |
onerror | script | Script to run when an error occurs |
onhashchange | script | Script to run when URL hash changes |
onload | script | Fires after the page finishes loading |
onmessage | script | Script to run when a message is received |
onoffline | script | Script to run when browser goes offline |
ononline | script | Script to run when browser goes online |
onpagehide | script | Script to run when user leaves the page |
onpageshow | script | Script to run when user opens the page |
onpopstate | script | Script to run when browser history changes |
onresize | script | Fires when browser window is resized |
onstorage | script | Script to run when Web Storage updates |
onunload | script | Fires when the page unloads |
Form Event Attributes
Events triggered by actions inside HTML forms and input elements.
| Attribute | Value | Description |
|---|---|---|
onblur | script | Fires when element loses focus |
onchange | script | Fires when element value changes |
oncontextmenu | script | Fires when context menu appears |
onfocus | script | Fires when element gets focus |
oninput | script | Fires when user inputs data |
oninvalid | script | Fires when element is invalid |
onreset | script | Fires when form resets |
onsearch | script | Fires when user searches |
onselect | script | Fires after text selection |
onsubmit | script | Fires when form is submitted |
Keyboard Event Attributes
Events triggered by keyboard actions.
| Attribute | Value | Description |
|---|---|---|
onkeydown | script | Fires when key is pressed |
onkeypress | script | Fires when key is pressed down |
onkeyup | script | Fires when key is released |
Mouse Event Attributes
Events triggered by mouse actions.
| Attribute | Value | Description |
|---|---|---|
onclick | script | Fires when element is clicked |
ondblclick | script | Fires when element is double-clicked |
onmousedown | script | Fires when mouse button is pressed |
onmousemove | script | Fires when mouse moves over element |
onmouseout | script | Fires when mouse leaves element |
onmouseover | script | Fires when mouse enters element |
onmouseup | script | Fires when mouse button is released |
onmousewheel | script | Deprecated. Use onwheel instead |
onwheel | script | Fires when mouse wheel scrolls |
Drag Event Attributes
Events triggered during drag-and-drop operations.
| Attribute | Value | Description |
|---|---|---|
ondrag | script | Fires while element is dragged |
ondragend | script | Fires after drag operation ends |
ondragenter | script | Fires when dragged item enters target |
ondragleave | script | Fires when dragged item leaves target |
ondragover | script | Fires while dragging over target |
ondragstart | script | Fires when drag operation starts |
ondrop | script | Fires when dragged item is dropped |
onscroll | script | Fires when scrollbar is scrolled |
Clipboard Event Attributes
Events triggered during copy, cut, and paste actions.
| Attribute | Value | Description |
|---|---|---|
oncopy | script | Fires when content is copied |
oncut | script | Fires when content is cut |
onpaste | script | Fires when content is pasted |
Media Event Attributes
Events triggered by media elements like audio, video, and images.
| Attribute | Value | Description |
|---|---|---|
onabort | script | Fires on abort |
oncanplay | script | Fires when media can start playing |
oncanplaythrough | script | Fires when media can play without buffering |
oncuechange | script | Fires when cue changes |
ondurationchange | script | Fires when media duration changes |
onemptied | script | Fires when media becomes unavailable |
onended | script | Fires when media playback ends |
onerror | script | Fires when media loading error occurs |
onloadeddata | script | Fires when media data loads |
onloadedmetadata | script | Fires when media metadata loads |
onloadstart | script | Fires when media loading starts |
onpause | script | Fires when media pauses |
onplay | script | Fires when media starts playing |
onplaying | script | Fires when media is actively playing |
onprogress | script | Fires while media downloads |
onratechange | script | Fires when playback speed changes |
onseeked | script | Fires after seeking ends |
onseeking | script | Fires while seeking |
onstalled | script | Fires when browser cannot fetch media |
onsuspend | script | Fires when media loading stops |
ontimeupdate | script | Fires when playback position changes |
onvolumechange | script | Fires when volume changes |
onwaiting | script | Fires while waiting for media buffering |
Misc Event Attributes
| Attribute | Value | Description |
|---|---|---|
ontoggle | script | Fires when <details> element opens or closes |
HTML Event Attributes are supported in all modern browsers including:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera