The best HTML Event Tutorial In 2024, In this tutorial you can learn Global event properties,Event Properties window (Window Event Attributes),Form event (Form Events),Keyboard events (Keyboard Events),Mouse events (Mouse Events),Multimedia event (Media Events),Other events,
One new feature is that you can make HTML 4 HTML events trigger the browser's behavior, say, starting a JavaScript when a user clicks on an HTML element.
If you want to learn more about the event property, visit JavaScript Tutorial
The following table provides standard event properties, they can be inserted into HTML / XHTML elements to define event actions.
New: HTML5 new properties of the event.
This event is triggered by the window (for <body> tag):
Attributes | value | description |
---|---|---|
onafterprint New | script | After you run the script to print the document |
the OnBeforePrint New | script | Run script before the document is printed |
onbeforeonload New | script | Run the script before the document is loaded |
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 gets focus |
onhaschange New | script | Run the script when the document changes |
onload | script | Run the script when the document is loaded |
onmessage New | script | Run the script when the trigger message |
onoffline New | script | Run the script when the document is offline |
ononline New | script | When running the script on the document line |
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 change history |
onredo New | script | Run the script when the document is executed and then perform the operation (redo) |
onResize New | script | Run the script when the window is resized |
onstorage New | script | When the Web Storage Area Update (data when changes occur in the memory space) to run the script |
onundo New | script | Run the script when the document is executed revocation |
the onunload New | script | Run the script when the user leaves the document |
Form event triggers (for all HTML elements, but the elements for an HTML form within a form) in an HTML form:
Attributes | value | description |
---|---|---|
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 trigger context menu |
onfocus | script | Run the script when the element gets focus |
onformchange New | script | Run the script when the form changes |
onforminput New | script | Run the script when the form to get user input |
oninput New | script | Run the script when the element to get user input |
oninvalid New | script | Run the script when the element is invalid |
onreset | script | Run the script when the form is reset. HTML 5 is not supported. |
onselect | script | Run the script when the selected element |
onsubmit | script | Run the script when the form is submitted |
Attributes | value | description |
---|---|---|
onkeydown | script | Run the script when the key is pressed |
onkeypress | script | Run the script when you press and release the button |
onkeyup | script | Run the script when the key is released |
Triggered by mouse events, similar user behavior:
Attributes | value | description |
---|---|---|
onclick | script | Run the script when you click the mouse |
ondblclick | script | Run the script when the mouse double-click |
ondrag New | script | Run the script when the drag element |
ondragend New | script | Run the script when the drag operation ends |
ondragenter New | script | Run the script when the element is dragged to a valid drop target |
ondragleave New | script | Run the script when the element leave valid drop target |
ondragover New | script | Run the script when the element is dragged to a valid drop over the target |
ondragstart New | script | Run the script when a drag operation begins |
ondrop New | script | Run the script when the element is being dragged drop |
onmousedown | script | Run the script when the mouse button is pressed |
onmousemove | script | When the mouse pointer moves to run the script |
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 the mouse button is released |
onmousewheel New | script | Run the script when the mouse wheel |
onscroll New | script | When running the script scroll scroll bar elements |
Video (videos), image (images) or audio (audio) that triggered the event, such as multi-media elements used in HTML <audio>, <embed>, <img>, <object>, and <video>):
Attributes | value | description |
---|---|---|
onabort | script | When running the script aborts event |
oncanplay New | script | Run the script when the media can start playing but may need to stop due to buffer |
oncanplaythrough New | script | When the media can run the script without having to stop because of the buffer to play to the end |
ondurationchange New | script | Run the script when the media length change |
onemptied New | script | When suddenly the media resource element is empty (network error, loading error, etc.) to run the script |
onended New | script | Run the script when the media has arrived at the end of |
onerror New | script | Run the script when an error occurs during the loading element |
onloadeddata New | script | Run the script when loading media data |
onloadedmetadata New | script | Run the script when the duration of the media and other media data elements have been loaded |
onloadstart New | script | Run the script when the browser begins loading media data |
onpause New | script | Run the script when the suspension of media data |
onplay New | script | Run the script when the media data is to start playing |
onplaying New | script | Run the script when the media data has begun to play |
onprogress New | script | Run the script when the browser is taking the media data |
onratechange New | script | Run the script when the media data playback rate changes |
onreadystatechange New | script | Run the script when the ready state (ready-state) change |
onseeked New | script | Run the script when the media element positioning properties [1] is no longer true and the positioning has ended |
onseeking New | script | When positioning elements of the media attribute is true and the positioning has been in operation at the beginning of the script |
onstalled New | script | Run the script when the media data retrieval process (delay) errors |
onsuspend New | script | Run the script when the browser has been taken, but before the media data retrieval entire media file stops |
ontimeupdate New | script | Run the script when the media changes its playback position |
onvolumechange New | script | Or will run the script when the volume is set to mute when the media change the volume |
onwaiting New | script | Run the script continues to play when the media has to stop playing but intend |
Attributes | value | description |
---|---|---|
OnShow New | script | When the <menu> element is displayed in the context of the trigger |
ontoggle New | script | When users open or close <details> element triggers |