Home > Developer > JavaScript
HTML events and html events
1. HTML global event attributes
One of the new features of HTML4 is that HTML events can trigger browser behaviors. For example, when a user clicks an HTML element, a JavaScript is started, and some new event attributes are added to html5.
HTML events occur on HTML elements. When JavaScript is used on an HTML page, JavaScript can trigger these events. HTML events can be browser behaviors or user behaviors. Browser behavior, such as triggering events when a page is loaded and triggering events when the page is closed. User behavior, such as clicking the button to trigger events and changing the window size to trigger events. Generally, JavaScript can execute some code when an event is triggered. You can add event attributes to HTML elements and use JavaScript code to add HTML elements. HTML event properties can directly execute JavaScript code. HTML event properties can call JavaScript functions. However, JavaScript code is usually used to bind event handlers to HTML elements. JavaScript events can be used to process form verification, user input, user behavior, and browser actions.
The following table provides standard event attributes that can be bound to HTML elements to define event behavior.
2. Window event Properties
This event is triggered by a window, applicable to the <body> label:
| Event attributes | Description |
| Onload | Run the script when the page is loaded. |
| Onfocus | Run the script when the window gets focus |
| Onblur | Run the script when the window loses focus |
| Onbeforeonload(H5) | Run the script before loading the page. |
| Onunload(H5) | Run the script when the user leaves the document |
| Onerror(H5) | Run the script when an error occurs. |
| Ononline(H5) | Run the script when the document goes online. |
| Onoffline(H5) | Run scripts when documents are offline |
| Onhaschange(H5) | Run the script when the document changes |
| Onundo(H5) | Run the script when the document is undo. |
| Onmessage(H5) | Run scripts when a message is triggered. |
| Onresize(H5) | Run the script when the window size is adjusted. |
| Onpageshow(H5) | Run the script when the window is visible |
| Onpagehide(H5) | Run the script when the window is hidden |
| Onpopstate(H5) | Run the script when the window history changes |
| Onredo(H5) | Run the script when the document executes and then executes the operation. |
| Onstorage(H5) | When the Web Storage (Network Storage) area is updated (when the data in the bucket changes), run the script |
| Onbeforeprint(H5) | Run the script before printing the page. |
| Onafterprint(H5) | Run the script after printing the page. |
3. Form event attributes
A form event is triggered in an HTML form and applies to all HTML elements. However, the HTML element must be in the form:
| Event attributes | Description |
| Onselect | Run the script when selecting an element. |
| Onchange | Run the script when the element changes. |
| Onsubmit | Run the script when the form is submitted. |
| Onfocus | Run the script when the element gets focus |
| Onblur | Run the script when the element loses focus |
| Onforminput(H5) | Run the script when the form obtains user input. |
| Oninput(H5) | Run the script when the element obtains user input. |
| Onformchange(H5) | Run the script when the form changes. |
| Oncontextmenu(H5) | Run the script when the context menu is triggered. |
| Oninvalid(H5) | Run the script when the element is invalid. |
4. multimedia event attributes
This event is triggered by image, audio, or video. It is mostly used in HTML media elements such as , <audio>, <video>, <embed> and <object>, except for and <object>, multimedia elements are newly added to html5. therefore, the attributes of multimedia events are newly added:
| Event attributes | Description |
| Onabort | Run the script when a stop event occurs. |
| Onprogress(H5) | Run the script when the browser is retrieving media data |
| Onloadstart(H5) | Run scripts when the browser starts loading media data |
| Onerror(H5) | Run the script when an error occurs during element loading. |
| Onloadeddata(H5) | Run scripts when loading media data |
| Onreadystatechange(H5) | Run the script when the ready state (ready-state) changes. |
| Onplay(H5) | Run the script when media data is about to start playing |
| Onplaying(H5) | Run the script when media data has been played. |
| Onpause(H5) | Run scripts when media data is paused |
| Onvolumechange(H5) | Run the script when the media volume is changed or when the volume is set to mute |
| Onended(H5) | Run the script when the media has reached the end |
| Oncanplay(H5) | Run the script when the media can start playing but may need to be stopped due to buffering. |
| Oncanplaythrough(H5) | The script runs when the media can stop playing to the end without buffering. |
| Ontimeupdate(H5) | Run the script when the media changes its playback position |
| Onwaiting(H5) | Run the script when the media has stopped playing but intends to continue playing |
| Ondurationchange(H5) | Run the script when the media Length changes |
| Onratechange(H5) | Run the script when the playback speed of media data changes |
| Onemptied(H5) | When media resource elements are suddenly empty (Network errors, loading errors, etc.), run the script. |
| Onloadedmetadata(H5) | Run the script when the media element duration and other media data have been loaded. |
| Onstalled(H5) | Run the script when there is an error in the Process of retrieving media data (latency) |
| Onsuspend(H5) | Run the script when the browser stops retrieving media data but before retrieving the entire media file. |
| Onseeked(H5) | Run the script when the positioning attribute of the media element is no longer true and the positioning is complete. |
| Onseeking(H5) | Run the script when the positioning attribute of the media element is true and the positioning has started |
5. Mouse event Properties
Trigger events with the mouse to simulate user behavior:
| Event attributes | Description |
| Onclick | Run the script when you click the mouse. |
| Ondblclick | Run the script when double-clicking the mouse. |
| Onmouseover | Run the script when you move the cursor to the element. |
| Onmouseout | Run the script when the mouse moves the element |
| Onmousemove | Run the script when the mouse moves |
| Onmousedown | Run the script when you press the mouse button. |
| Onmouseup | Run the script when you release the mouse button. |
| Onmousewheel(H5) | Run the script when you rotate the scroll wheel. |
| Onscroll(H5) | Run the script when rolling the element's scroll bar. |
| Ondrag(H5) | Run the script when you drag an element. |
| Ondragstart(H5) | Run the script when the drag operation starts. |
| Ondragend(H5) | Run the script when the drag operation ends. |
| Ondrop(H5) | Run the script when the dragged element is being dragged. |
| Ondragover(H5) | Run the script when the element is dragged to the top of the valid drag-and-drop target. |
| Ondragenter(H5) | Run the script when the element is dragged to a valid drag-and-drop target. |
| Ondragleave(H5) | Run the script when the element leaves the valid drag-and-drop target. |
6. keyboard event attributes
Trigger events by pressing the keyboard to simulate user behavior:
| Event attributes | Description |
| Onkeydown | Run the script when you press the key. |
| Onkeyup | Run the script when the button is released. |
| Onkeypress | Run the script when you press and release the button. |
7. other event attributes
| Event attributes | Description |
| Onshow(H5) | Triggered when the <menu> element is displayed in the context |
| Ontoggle(H5) | Triggered when the <details> element is enabled or disabled. |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
