Event attributes are attributes that bind an event to a JavaScript event handler.
In return, this event handler can do something useful in response.
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.
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.
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.
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 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 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 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 events are related to user interactions with the mouse.
The event attributes can be applied to a variety 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 events are related to user interactions with the clipboard.
The event attributes can be applied to a 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 events are related to page elements that are moved around by the user with the mouse.
The event attributes can be applied to a 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 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. |
