An event occurs when the browser reacts to a particular action of the user. The user generates an event when clicking on a mouse, playing video, uploading a document or an image, or performing other actions on a website.
To react to an event, a handler is assigned to it. A handler is a way to run script (e.g., JavaScript) in case of user actions. There are many ways of attaching a handler, and one of them is setting it in HTML with attributes.
Below, you can find a table of event attributes used to initiate specific actions.
Window Events Attributes
Window events are triggered for the window object. The attributes are applicable only to the <body> tag.
| Attribute | Description |
|---|---|
| onafterprint | Executed when the document is printed.
New attribute in HTML5. |
| onbeforeprint | Executed before the document is printed.
New attribute in HTML5. |
| onbeforeunload | Executed when the document is about to get unloaded (when a user is about to quit the page before it is loaded).
New attribute in HTML5. |
| onblur | Executed when a window loses focus. |
| onerror | Executed when an error occurs when downloading the document.
New attribute in HTML5. |
| onhashchange | Executed when the anchor in URL of a web page is changed (anchor comes after #).
New attribute in HTML5. |
| onload | Executed when content of a web page (images, CSS styles and scripts) is entirely loaded. |
| onmessage | Executed when a message is triggered.
New attribute in HTML5. |
| onoffline | Executed when the browser works offline.
New attribute in HTML5. |
| ononline | Executed when the browser works online.
New attribute in HTML5. |
| onpagehide | Executed when a user go away from the web page.
New attribute in HTML5. |
| onpageshow | Executed when a user navigates to a web page.
New attribute in HTML5. |
| onpopstate | Executed when the window's history is changed.
New attribute in HTML5. |
| onredo | Executed when a “Redo” option is used ( the last action is reversed).
New attribute in HTML5. |
| onresize | Executed when a window is resized.
New attribute in HTML5. |
| onstorage | Executed when a web storage is updated.
New attribute in HTML5. |
| onundo | Executed when the last action is cancelled (“undo” command).
New attribute in HTML5. |
| onunload | Executed when a web page is unloaded (closed).
New attribute in HTML5. |
Form Events Attributes
An event that can occur within a form is called a form event. Form events happen when a user opens or closes a form, moves between forms, or works with data on a form.
Form events attributes can be applied to all HTML elements, but they are generally used with HTML forms elements.
| Attribute | Description |
|---|---|
| onblur | Executed when a form element loses focus. |
| onchange | Executed when the value of the element is changed. |
| oncontextmenu | Executed when the context menu is shown.
New attribute in HTML5. |
| onfocus | Executed when an element gets focus. |
| oninput | Executed when an element gets user input.
New attribute in HTML5. |
| oninvalid | Executed if an input element is invalid.
New attribute in HTML5. |
| onreset |
Executed when a form is reset (all controls within the form are set to their initial values).
New attribute in HTML5. |
| onsearch | Executed when the user writes something in a search field (for <input="search">). |
| onselect | Executed when some text is selected in an element. |
| onsubmit | Executed when a form is sent. |
Keyboard Events Attributes
The keyboard event attributes can be applied to all HTML elements.
| Attribute | Description |
|---|---|
| onkeydown | Executed when the user is pressing any key on the keyboard. |
| onkeypress | Executed when the user has pressed a key on the keyboard. (doesn’t work with Alt, Ctrl, Shift, Esc, PrScr). |
| onkeyup | Executed when a pressed key is released. |
Mouse Event Attributes
Mouse events occur when the mouse interacts with the HTML document. The attributes can be applied to all HTML elements.
| Attribute | Description |
|---|---|
| onclick | Executed when a mouse-button is clicked. |
| ondblclick | Executed when a mouse-button is clicked twice. |
| ondrag | Executed when an element is being dragged.
New attribute in HTML5. |
| ondragend | Executed when an element has been dragged.
New attribute in HTML5. |
| ondragenter | Executed when a dragged element enters a valid drop target.
New attribute in HTML5. |
| ondragleave | Executed when a dragged element leaves a valid drop target.
New attribute in HTML5. |
| ondragover |
Executed when a dragged element being dragged over a valid drops target (every few hundred milliseconds).
New attribute in HTML5. |
| ondragstart | Executed when the user starts dragging an element.
New attribute in HTML5. |
| ondrop | Executed when the user drops dragging an element.
New attribute in HTML5. |
| onmousedown | Executed when a mouse button is pressed. |
| onmousemove | Executed when the mouse pointer is moved onto the element. |
| onmouseout | Executed when the mouse pointer moves out of an element. |
| onmouseover | Executed when the mouse pointer is moved onto an element. |
| onmouseup | Executed when a mouse button is released. |
| onmousewheel | Executed when the mouse wheel rolls up or down over an element.
Obsolete attribute (use onwheel attribute instead). |
| onscroll | Executed when an element's scrollbar is being scrolled.
New attribute in HTML5. |
| onwheel | Executed when the mouse wheel rolls up or down over an element.
New attribute in HTML5. |
Clipboard Event Attributes
| Attribute | Description |
|---|---|
| oncopy | Executed when the content of an element is copied. |
| oncut | Executed when the content of an element is cut. |
| onpaste | Executed when the content of an element is pasted. |
Media-files Events Attributes
Media-files events occur in media elements, like video, image, audio. The attributes can be applied to any HTML element, but they are generally used within audio, embed, img, object and video elements.
| Attribute | Description |
|---|---|
| onabort |
Executed when the loading of an audio/video is aborted.
New attribute in HTML5. |
| oncanplay |
Executed when the file is ready to start playing (has buffered enough to start playing).
New attribute in HTML5. |
| oncanplaythrough | Executed when the file is ready to be played from start to end without stopping for buffering.
New attribute in HTML5. |
| oncuechange | Executed when the duration of the media is changed.
New attribute in HTML5. |
| onemptied | Executed when something happens and the file is unavailable (e.g., when the Internet connection is lost).
New attribute in HTML5. |
| onended | Executed when a media file reached the end.
New attribute in HTML5. |
| onerror |
Executed when an error occurs when the file is being loaded.
New attribute in HTML5. |
| onloadeddata | Executed when media data is loaded.
New attribute in HTML5. |
| onloadedmetadata | Executed when metadata (size of media files, duration, etc. ) is loaded.
New attribute in HTML5. |
| onloadstart | Executed when the browser starts downloading media data.
New attribute in HTML5. |
| onpause | Executed when the mediafile is paused. New attribute in HTML5. |
| onplay | Executed when the file is ready to start playing. New attribute in HTML5. |
| onplaying |
Executed when the file starts playing.
New attribute in HTML5. |
| onprogress |
Executed when the browser is in process of getting media data.
New attribute in HTML5. |
| onratechange | Executed each time, when the playing mode is changed (e.g. user switches fast forward or slow motion mode).
New attribute in HTML5. |
| onseeked | Executed when the seeking attribute of the <audio> or <video> tags is set to false indicating that seeking has ended.
New attribute in HTML5. |
| onseeking | Executed when the seeking attribute of the <audio> or <video> tags is set to false indicating that seeking is active.
New attribute in HTML5. |
| onstalled | Executed when the browser cannot get media data for whatever reason.
New attribute in HTML5. |
| onsuspend | Executed when the browser has already started extracting media data, but the process was suspended before the data is completely loaded.
New attribute in HTML5. |
| ontimeupdate | Executed when the playing position is changed.
New attribute in HTML5. |
| onvolumechange | Executed each time when the volume is changed (includes setting the volume to "mute").
New attribute in HTML5. |
| onwaiting | Executed when media file is suspended, but is about to resume (e.g., when the file is paused for buffering).
New attribute in HTML5. |
Other Events Attributes
| Attribute | Description |
|---|---|
| onerror | Executed when an error occurs when downloading external file. |
| onshow |
Executed when the <menu> is shown as a context menu.
New attribute in HTML5. |
| ontoggle | Executed when a user opens or closes the <details>.
New attribute in HTML5. |
Practice Your Knowledge
What are global event attributes in HTML?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.