The event types in the DOM are:
UI (user interface) event that triggers when the user interacts with the element on the page;
Focus Event: Triggered when the element gets or loses focus;
Mouse event: Triggers when the user performs an action on the page through the mouse;
Wheel event: triggered when using the mouse wheel (or similar device);
Text event: Triggered when text is entered in a document;
Keyboard event: Triggered when the user performs an action on the page through the keyboard;
Composite event: triggered when a character is entered for the IME (Input Method Editor);
Change event: Triggering when the underlying DOM structure changes;
A. UI events
Load: The current page is completely loaded on the window trigger, triggered on the frameset when all frames are loaded, triggered on the element when the image is loaded, or triggered on the <object> element when the embedded content is loaded.
Unload: When the page is completely uninstalled and then triggered by window, when all the frames are unloaded and then triggered on the frameset, or when the embedded content is unloaded, it triggers on the <object> element.
Abort: When the user stops the download process, if the embedded content is not finished loading, it triggers on the <object> element
ERROR: Triggers on window when JavaScript errors occur, triggers on elements when images cannot be loaded, triggering on <object> elements when embedded content cannot be loaded, Or when there is a fire. Multiple frames cannot be loaded to trigger on the frame set.
Select: Triggers when the user selects one or more characters in a text box.
Resize: Triggers on windows or frames when the size of a window or frame changes
Scroll: When the user scrolls the contents of the element with the scrollbar, it fires on top of the element. The <body> element contains scroll bars for the loaded page.
Two. Focus Events
Blur: Triggered when the element loses focus. This event will not bubble; all browsers support it
Focus: Triggered when the element has the focal point, this event does not bubble; all browsers support it.
Focusin: Triggered when the element gets focus. This event is equivalent to the HTML event focus. But it bubbled. Browsers that support this event are ie5.5+, safari5.1+, opera11.5+, and Chrome
Focusin: Triggered when the element loses focus. This event is a generic version of the HTML event blur. Browsers that support this event are ie5.5+, safari5.1+, opera11.5+, and Chrome
Three. Mouse and Wheel Events
Click: The user clicks the primary mouse button (usually the left button) or triggers when the ENTER key is pressed.
DblClick: Triggers when the user double-clicks the primary mouse button
MouseDown: Triggered when the user presses any mouse button, the event cannot be triggered by the keyboard
MouseEnter: is triggered when the mouse cursor is first moved from outside the element to the range of elements. This event is not bubbling and is not triggered when the cursor is moved to a descendant element. It has been incorporated into the specification since DOM3. IE firefox9+ Opera supports this event.
MouseLeave: This event is not bubbling when the mouse cursor above the element is moved outside the range of elements, and is not triggered when the cursor is moved to a descendant element. It has been incorporated into the specification since DOM3. IE firefox9+ Opera supports this event.
MouseMove: A repeat trigger when the mouse pointer moves inside an element and cannot be triggered by the keyboard
Mouseout: Triggers when the mouse pointer is over an element, and the user moves it to another element.
MouseOver: The mouse is positioned outside an element, and then the user moves it first into the bounds of another element. This event cannot be triggered by the keyboard
MouseUp: Triggers when the user releases the mouse button. This event cannot be triggered by the keyboard
Note: The Click event is triggered only if the MouseDown and MouseUp events are triggered successively on the same element, and the Click event is not triggered if one of the MouseDown and MouseUp is canceled. The order in which the Click event is triggered is as follows: MouseDown mouseover click; DblClick event triggering sequence such as: MouseDown mouseover click MouseDown mouseover Click DblClick
1. Client area coordinates ClientX and Clienty 2. Page coordinate position Pagex and Pagey In IE8 and earlier versions, the ScrollLeft and ScrollTop properties of document.body (promiscuous mode) or document.documentelement (Standard mode) were required 3. screen coordinates position Use the Screenx and Screeny properties to determine the coordinate information relative to the screen.
4. Modifying the key DOM provides 4 properties that indicate the state of these modifier keys: Shiftkey, Ctrlkey, Altkey, Metakey if the corresponding key is pressed, the value is true otherwise false. When a mouse event occurs, you can determine whether the user has pressed the key at the same time by detecting these properties
5. Related elements: DOM provides information about the relevant elements through the Relatedtarget property of the event object. This property contains only values for MouseOver and mouseout events, and for other events, the value of this property is null IE8 and the previous version does not support Relatedtarget, which provides two properties to accomplish similar functions. When the MouseOver event is triggered, the formelement of IE saves the relevant elements, and when the Mouseout event is triggered, the related elements are preserved in the IE's toelement properties.
6. mouse button: The Click event is triggered only when the primary mouse is clicked, so it is not necessary to detect the button information. However, for MouseDown and MouseUp events, there is a button property in its event events that represents the press and Release buttons; the Button property in the DOM may have 3 values: 0 for the primary mouse button, 1 for the middle mouse button, and 2 for the secondary mouse button. Because the same button property was provided before IE8, it has 8 values and is more practical due to 3 values. So the compatible code is as follows:
right mouse button and wheel compatibility
Getbutton:function (event) {
if (Document.implementation.hasFeature ("Mouseevents", "2.0")) {
return Event.button;
}else {
The following is the compatibility method in IE, IE is less practical
Switch (Event.button) {
Case 0:
Case 1:
Case 3:
Case 5:
Case 7:
return 0;
Case 2:
Case 6:
return 2;
Case 4:
return 1;
}
}
},
7. Additional event Information the "DOM2 Level Event" Specification event object also provides the detail property for providing more information about the event. For mouse events, the detail contains a number that indicates how many clicks have occurred at the given location.
8. Mouse Wheel Event: The MouseWheel event is very popular and is supported by all browsers. So HTML5 also joined the event
Compatible Get mouse wheel information (there is a problem with this compatibility code)
Getwheeldelta:function (event) {
To be compatible with the earlier version of opera
if (Event.wheeldelta) {
Return (Client.engine.opera && Client.engine.opera < 9.5?)
-event.wheeldelta:event.wheeldelta);
} else {
The reason to multiply 40 is that Firefox returns 3 and-3
Return-event.detail * 40;
}
There is a problem with the code above. Client.engine.opera is not recognized in IE. So it can only be implemented in Firefox. But it should be possible to judge the early versions of opera.
9 Touch devices The implementation of iOS and Android devices is very special, because these devices do not have a mouse. Note the following points:
1. Dbclick events are not supported. Double-click the browser window to enlarge the screen. And there is no way to change that behavior.
2. Clicking an element triggers the MouseMove event. If this action causes the content to change, no other events will occur, and if the screen does not change, then the MouseDown, MouseUp, and click events are generated sequentially. Tapping an element that is not clickable does not trigger any events. Clickable elements are those that click to produce a default action, or elements that have been specified as onclick event handlers
The 3.mousemove event also triggers the mouseover and mouseout events.
4. The MouseWheel and scroll events are triggered when the page is scrolled with two fingers on the screen and the pages move with the finger
Four. Keyboard and text events have three keyboard events: KeyDown triggers when a user presses any key on the keyboard keypress triggers when a user presses a word keys on the keyboard keyup when the user releases a key on the keyboard. There is also a text event TextInput This event is a supplement to the KeyPress event, which is intended to block text more easily before it is displayed to the user, triggering the TextInput event before the text is inserted into the text box
When the user presses the word keys on a keyboard, the sequence of events that first triggers the event is: KeyDown keypress keyup If the user presses a word keys, the KeyDown and KeyPress events are repeatedly triggered until the user releases the key. If the user presses a non-character keys, the order in which the events are triggered is: KeyDown keyup if you hold down the word keys, it will repeatedly trigger the KeyDown event until the user releases the key, triggering the KeyUp. Keyboard events, like mouse events, support the same modifier keys, and there are Shiftkey ctrlkey Altkey and Metakey properties in event objects for keyboard events.
The keyboard event in the DOM3 level event no longer contains the CharCode event. The second is the inclusion of two new attributes: Key and char, where key is pressed by the character and the result of the display is the same, and char only when pressed is the character will appear, press the non-character value is null. A key with a property named location that indicates where it was pressed is also added. (Because of a cross-browser problem (IE9 supports the key property, but not the char attribute, SAFARI5 and chrome support attributes named KeyIdentifier), it is not recommended)
DOM3-level events introduce a new event textInput it differs from KeyPress one is that only editable regions can trigger the TextInput event difference is that the TextInput event is triggered only when the user presses a key that can enter the actual character. The KeyPress event is also triggered when the key that can affect the text display is pressed. Browsers that support TextInput properties include ie9+, Safari, and Chrome
Types of events in HTML5
onabort: Run the script when the Abort event occurs onblur: Run the script when the focus is lost oncanplay: Run a script (for example, a buffer part) when the media can start playing but may need to stop because of buffering Oncanplaythrough: Run a script when the media can play to the end without buffering (for example, all that has been buffered) onchange: Run the script when the element changes onclick: Run the script when the mouse is clicked OnContextMenu: Runs the script when the context menu is triggered ondblclick: Run the script when you double-click the mouse ondrag: Run script when dragging elements ondragend: Run script when the drag operation ends ondragenter: Runs the script when the element is dragged to a valid drag-and-drop target ondragleave: Run the script when the element leaves a valid drag-and-drop target OnDragOver: Run the script when the element is dragged over a valid drop target ondragstart: Run the script when the drag operation starts ondrop: Run the script when the dragged element is being dragged Ondurationchange: Run script When media length changes onemptied: Run scripts when the media resource element is suddenly empty (network error, load error, and so on) onended: Run the script when the media has arrived at the end OnError: Run script when an error occurs during element loading onfocus: Run the script when the focus is obtained onformchange: run the script when the form changes onforminput: Run the script when the form gets user input oninput: Runs the script when the element obtains user input oninvalid: Run the script when the element is invalid onkeydown: Run the script when the key is pressed (triggered when not released) onkeypress: Runs the script when the key is pressed and released (must undergo a press, release process to trigger) onkeyup: Run the script when the key is released (triggered when it is released) onload: Run the script when loading Onloadeddata: Run script when media data is loaded onloadedmetadata: when mediaThe duration of the element and other media data is loaded when the script is run onloadstart: Run the script when the browser starts loading the media data onmousedown: Run the script when the mouse button is pressed OnMouseMove: Runs the script when the mouse pointer moves onmouseout: Runs the script when the mouse pointer moves out of the element onmouseover: Run the script when the mouse pointer moves over the element OnMouseUp: Run script when the mouse button is released onmousewheel: Run the script when the mouse wheel is rotated onpause: Run script When media data is paused onplay: Run script When media data is about to start playing onplaying: Run script When media data has started onprogress: Run script when the browser is fetching media data onratechange: Run scripts when the playback rate of media data changes onReadyStateChange: Run the script when the Ready state (Ready-state) changes onreset: Run script when the form is reset onscroll: Run script when scrolling element scrolls bar Onseeked: Run script when the Location property of the media element is no longer true and the location has ended onseeking: Run the script when the media element's positioning property is true and the location has started onselect: Run script when selecting elements OnShow: onstalled: Run the script when there is an error in retrieving the media data (delay) onsubmit: Run the script when submitting the form Onsuspend: When the browser has taken the media data but stops before retrieving the entire media file ontimeupdate: Run the script when the media changes its playback position Onvolumechange: Run the script when the media changes the volume or when the volume is muted onwaiting: Run the script when the media has stopped playing but you intend to continue playing
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
