HTML5 event method summary, HTML5 event method summary
The following small series will bring you a summary of all HTML5 event methods. I think it's quite good. Now I will share it with you and give you a reference. Let's take a look at it together.
The following table lists the standard event attributes that can be inserted into HTML 5 elements to define event behavior.
1. Window Event properties-Window Event Attributes
2. Form event-Form Events
3. Keyboard Events-Keybord Events
4. Mouse event-Mouse Events
5. Media Events-Media Events
--------------------------------------------------------------------------------
Window event Properties
Event triggered by the window object. Applicable to <body> labels:
Attribute
Value
Description
Onafterprint
Script
Run the script after printing the document.
Onbeforeprint
Script
Run the script before printing the document.
Onbeforeonload
Script
Run the script before the file is loaded.
Onblur
Script
Run the script when the window loses focus
Onerror
Script
Run the script when an error occurs.
Onfocus
Script
Run the script when the window gets focus
Onhaschange
Script
Run the script when the document changes
Onload
Script
Run the script when the document is loaded.
Onmessage
Script
Run scripts when a message is triggered.
Onoffline
Script
Run scripts when documents are offline
Ononline
Script
Run the script when the document goes online.
Onpagehide
Script
Run the script when the window is hidden
Onpageshow
Script
Run the script when the window is visible
Onpopstate
Script
Run the script when the window history changes
Onredo
Script
Run the script when the document executes the redo operation.
Onresize
Script
Run the script when the window size is adjusted.
Onstorage
Script
Run the script when the file is loaded.
Onundo
Script
When the Web Storage area is updated (when data in the bucket changes)
Onunload
Script
Run the script when the user leaves the document
--------------------------------------------------------------------------------
Form Events
Events triggered by actions in an HTML form. Applicable to All HTML 5 elements, but most commonly used in form elements:
Attribute
Value
Description
Onblur
Script
Run the script when the element loses focus
Onchange
Script
Run the script when the element changes.
Oncontextmenu
Script
Run the script when the context menu is triggered.
Onfocus
Script
Run the script when the element gets focus
Onformchange
Script
Run the script when the form changes.
Onforminput
Script
Run the script when the form obtains user input.
Oninput
Script
Run the script when the element obtains user input.
Oninvalid
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 selecting an element.
Onsubmit
Script
Run the script when the form is submitted.
--------------------------------------------------------------------------------
Keyboard Events
Events triggered by the keyboard. Applicable to All HTML 5 elements:
Attribute
Value
Description
Onkeydown
Script
Run the script when you press the key.
Onkeypress
Script
Run the script when you press and release the button.
Onkeyup
Script
Run the script when the button is released.
--------------------------------------------------------------------------------
Mouse events
An event triggered by a mouse or similar user action. Applicable to All HTML 5 elements:
Attribute
Value
Description
Onclick
Script
Run the script when you click the mouse.
Ondblclick
Script
Run the script when double-clicking the mouse.
Ondrag
Script
Run the script when you drag an element.
Ondragend
Script
Run the script when the drag operation ends.
Ondragenter
Script
Run the script when the element is dragged to a valid drag-and-drop target.
Ondragleave
Script
Run the script when the element leaves the valid drag-and-drop target.
Ondragover
Script
Run the script when the element is dragged to the top of the valid drag-and-drop target.
Ondragstart
Script
Run the script when the drag operation starts.
Ondrop
Script
Run the script when the dragged element is being dragged.
Onmousedown
Script
Run the script when you press the mouse button.
Onmousemove
Script
Run the script when the mouse pointer moves
Onmouseout
Script
Run the script when the mouse pointer is removed from 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
Script
Run the script when you rotate the scroll wheel.
Onscroll
Script
Run the script when rolling the element's scroll bar.
--------------------------------------------------------------------------------
Media events
Events triggered by videos, images, audios, and other media. Applicable to All HTML 5 elements, but most commonly used in media elements (such as audio, embed, img, object, and video:
Attribute
Value
Description
Onabort
Script
Run the script when a specified event occurs.
Oncanplay
Script
Run the script when the media can start playing but may need to be stopped due to buffering.
Oncanplaythrough
Script
The script runs when the media can stop playing to the end without buffering.
Ondurationchange
Script
Run the script when the media Length changes
Onemptied
Script
When media resource elements are suddenly empty (Network errors, loading errors, etc.), run the script.
Onended
Script
Run the script when the media has reached the end
Onerror
Script
Run the script when an error occurs during element loading.
Onloadeddata
Script
Run scripts when loading media data
Onloadedmetadata
Script
Run the script when the media element duration and other media data have been loaded.
Onloadstart
Script
Run scripts when the browser starts loading media data
Onpause
Script
Run scripts when media data is paused
Onplay
Script
Run the script when media data is about to start playing
Onplaying
Script
Run the script when media data has been played.
Onprogress
Script
Run the script when the browser is retrieving media data
Onratechange
Script
Run the script when the playback speed of media data changes
Onreadystatechange
Script
Run the script when the ready state (ready-state) changes.
Onseeked
Script
Run the script when the positioning attribute [1] of the media element is no longer true and the positioning is complete.
Onseeking
Script
Run the script when the positioning attribute of the media element is true and the positioning has started
Onstalled
Script
Run the script when there is an error in the Process of retrieving media data (latency)
Onsuspend
Script
Run the script when the browser stops retrieving media data but before retrieving the entire media file.
Ontimeupdate
Script
Run the script when the media changes its playback position
Onvolumechange
Script
Run the script when the media volume is changed or when the volume is set to mute
Onwaiting
Script
Run the script when the media has stopped playing but intends to continue playing
[1]: The English translation of the positioning attribute is: seeking attribute.
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
