HTML event properties
Global event properties
One of the new features of HTML 4 is that HTML events can trigger behavior in the browser, such as starting a JavaScript when a user clicks on an HTML element.
If you want to learn more about event properties, visit the JavaScript tutorial
The following table provides standard event properties that you can insert into HTML/XHTML elements to define event behavior.
New : HTML5 adds property events.
Window Event Properties
The event is triggered by the window (for labels):
| Property | Value | Describe |
|---|---|---|
| onafterprint New | script | Run the script after you print the document |
| onbeforeprint New | script | Run the script before the document is printed |
| onbeforeonload New | script | Run the script before the document loads |
| onblur | script | Run the script when the window loses focus |
| onerror New | script | Run the script when an error occurs |
| onfocus | script | Run the script when the window is in focus |
| onhaschange New | script | Run the script when the document changes |
| onload | script | Run the script when the document loads |
| onmessage New | script | Run the script when the message is triggered |
| onoffline New | script | Run the script when the document is offline |
| ononline New | script | Run the script when the document is online |
| onpagehide New | script | Run the script when the window is hidden |
| onpageshow New | script | Run the script when the window is visible |
| onpopstate New | script | Run the script when the window history changes |
| onredo New | script | Run the script when the document performs a redo |
| onresize New | script | Run the script when the window is resized |
| onstorage New | script | Run the script when the Web Storage region is updated (when data in storage space changes). |
| onundo New | script | Run the script when the document is undone |
| onunload New | script | Run the script when the user leaves the document |
Form Events
Form events are triggered in html forms (for all HTML elements, but the HTML elements need to be inside the form):
| Property | Value | Describe |
|---|---|---|
| onblur | script | Run the script when the element loses focus |
| onchange | script | Run the script when the element changes |
| oncontextmenu New | script | Run the script when the context menu is triggered |
| onfocus | script | Run the script when the element gets the focus |
| onformchange New | script | Run the script when the form changes |
| onforminput New | script | Run the script when the form gets user input |
| oninput New | script | Run the script when the element gets user input |
| oninvalid New | script | Run the script when the element is invalid |
| onreset | script | Run the script when the form is reset. ed. |
| onselect | script | Run the script when the element is elected |
| onsubmit | script | Run the script when the form is submitted |
Keyboard Events
| Property | Value | Describe |
|---|---|---|
| onkeydown | script | Run the script when the key is pressed |
| onkeypress | script | Run the script when the key is pressed and released |
| onkeyup | script | Run the script when the keys are released |
Mouse Events
Triggering an event with the mouse, similar to the user's behavior:
| Property | Value | Describe |
|---|---|---|
| onclick | script | Run the script when you click the mouse |
| ondblclick | script | Run the script when you double-click the mouse |
| ondrag New | script | Run the script when you drag an element |
| ondragend New | script | Run the script at the end of the drag operation |
| ondragenter New | script | Run the script when the element is dragged to a valid drag-and-drop target |
| ondragleave New | script | Run the script when the element leaves a valid drag-and-drop target |
| ondragover New | script | Run the script when the element is dragged above the valid drag-and-drop target |
| ondragstart New | script | Run the script when the drag operation begins |
| ondrop New | script | Run the script when the dragged element is being dragged and dropn |
| onmousedown | script | Run the script when the mouse button is pressed |
| onmousemove | script | Run the script as the mouse pointer moves |
| onmouseout | script | Run the script when the mouse pointer moves out of the element |
| onmouseover | script | Run the script when the mouse pointer moves over the element |
| onmouseup | script | Run the script when you release the mouse button |
| onmousewheel New | script | Run the script when the mouse wheel is turned |
| onscroll New | script | Run the script when you scroll through the scroll bar of an element |
Media Events
The event is triggered by video, images, or audio, and is used in HTML media elements such as
| Property | Value | Describe |
|---|---|---|
| onabort | script | Run the script when an abort event occurs |
| oncanplay New | script | Run the script when the media can start playing but may need to stop because of buffering |
| oncanplaythrough New | script | Run the script when the media can play to the end without having to stop buffering |
| ondurationchange New | script | Run the script when the media length changes |
| onemptied New | script | Run the script when the media resource element suddenly becomes empty (network error, load error, etc.). |
| onended New | script | Run the script when the media has reached the end |
| onerror New | script | Run the script when an error occurs during the element load |
| onloadeddata New | script | Run the script when the media data is loaded |
| onloadedmetadata New | script | Run the script when the duration of the media element and other media data are loaded |
| onloadstart New | script | Run the script when the browser starts loading media data |
| onpause New | script | Run the script when media data is paused |
| onplay New | script | Run the script when the media data is about to start playing |
| onplaying New | script | Run the script when the media data has started playing |
| onprogress New | script | Run the script while the browser is taking media data |
| onratechange New | script | Run the script when the playback rate of the media data changes |
| onreadystatechange New | script | Run the script when the ready-state changes |
| onseeked New | script | Run the script when the positioning properties of the media element are no longer true and the positioning is over |
| onseeking New | script | Run the script when the positioning properties of the media element are true and the positioning has started |
| onstalled New | script | Run the script when there is an error (delay) during the return of media data |
| onsuspend New | script | Run the script when the browser is already taking media data but stopping before the entire media file is recovered |
| ontimeupdate New | script | Run the script when the medium changes where it plays |
| onvolumechange New | script | Run the script when the medium changes the volume or when the volume is muted |
| onwaiting New | script | Run the script when the media has stopped playing but intends to continue playing |
Other events
| Property | Value | Describe |
|---|---|---|
| onshow New | script | Triggered when the element is displayed in context |
| ontoggle New | script | Triggered when the user turns the element on or off |