Details about DOM event types and dom events

Details about DOM event types and dom events
I. Form Events:

An input event is triggered when the values of <input> and <textarea> change. In addition, when you open the element of the contenteditable attribute, the input event is triggered as long as the value changes. An input event is triggered consecutively. For example, an input event is triggered every time you press a key. The select event is triggered when the text is selected in <input> and <textarea>. A Change event is triggered when the values of <input>, <select>, and <textarea> Change. It is the biggest difference from the input event, that is, it will not be triggered consecutively. It will only be triggered when all the modifications are completed, and the input event will inevitably lead to a change event. Specifically, it is divided into the following situations.
Triggered when a single-sector (radio) or checkbox is activated.
Triggered when the user submits the request. For example, select from the following list and select from the date or file input box.
Triggered when the value of the text box or textarea element changes and the focus is lost.
The reset event is triggered by the form element when the form is reset (all form members are changed back to the default value. The submit event is triggered by the form element when the form data is submitted to the server.

Ii. Document events:

The following events are related to webpage loading and uninstallation::BeforeunloadThis event is triggered when the window is about to be closed or when document and webpage resources are about to be detached. It can be used to prevent users from accidentally closing webpages. The default action of this event is to close the current window or document. If the event is called in the listener function. preventDefault (), or assign a non-empty value to the returnValue attribute of the event object, a confirmation box is automatically displayed, asking the user to confirm whether to close the webpage. If you click "cancel", the webpage will not be closed. The string returned by the listener function is displayed in the confirmation dialog box.

window.addEventListener('beforeunload', function( event ) {
Event. returnValue = 'Are you sure you want to leave? '; // Or event. preventDefault ();
});
UnloadThe event is triggered when the window is closed or the document object is about to be detached. It occurs on objects such as window, body, and frameset. The trigger sequence is after the beforeunload and pagehide events. The unload event is triggered only when the page is not cached by the browser. In other words, if the page is uninstalled by pressing forward/backward, the unload event is not triggered. When an unload event occurs, the document object is in a special State. All resources still exist, but are invisible to users. All UI interactions (such as window. open, alert, and confirm) are invalid. In this case, even if an error is thrown, the document cannot be uninstalled.

LoadAn event is triggered when the page is loaded successfully, and an error event is triggered when the page fails to be loaded. Note: loading pages from the browser cache does not trigger the load event. These two events are actually progress events, not only happen on the document object, but also on various external resources. Browsing a Web page is a process of loading various resources, including image, style sheet, script, video, and audio) and Ajax requests (XMLHttpRequest. These resources and document objects, window objects, and XMLHttpRequestUpload objects all trigger load events and error events.

Pageshow event, pagehide event: by default, the browser will cache the page in the current session. When you click the forward/backward button, the browser loads the page from the cache.

PageshowEvents are triggered when a page is loaded, including loading for the first time and loading from the cache. If you want to specify the code that runs every time the page is loaded (whether or not it is cached from the browser), you can place it in the event listening function. The trigger sequence of the first load event is after the load event. When loading from the cache, the load event will not be triggered, because the cache of the webpage is usually like the running status of the load event listening function, so you do not have to execute it repeatedly. Similarly, if the page is loaded from the cache, the JavaScript script initialized in the webpage (such as the DOMContentLoaded event listening function) will not be executed. The pageshow event has a persisted attribute and returns a Boolean value. When the page is loaded for the first time, this attribute is false; when the page is loaded from the cache, this attribute is true. If (event. persisted ){...}

PagehideThe event is similar to the pageshow event. It is triggered when you exit the current page by clicking the forward/backward button. The difference between it and the unload event is that if the page is not stored in the cache after the listening function of the unload event is defined on the window object, and the pagehide event is used, the page will be saved in the cache. The event object of the pagehide event has a persisted attribute. setting this attribute to true indicates that the page is saved in the cache. setting this attribute to false indicates that the page is not saved in the cache, if the unload event listening function is set, the function runs immediately after the pagehide event. If the page contains a frame or iframe element, the pageshow event and pagehide event of the frame page will be triggered before the home page.

The following events are related to the Document Status:

DOMContentLoadedWhen the HTML document is downloaded and parsed, The DOMContentLoaded event is triggered on the document object. At this time, only HTML document parsing (DOM generation on the entire page) is completed, and all external resources (style sheets, scripts, iframe, etc.) may not be downloaded yet. That is to say, this event occurs much earlier than the load event. Note that JavaScript scripts on the Web page are executed synchronously. Therefore, the listener function that defines the DOMContentLoaded event should be placed at the beginning of all scripts. Otherwise, the DOMContentLoaded event will be postponed once the script is blocked. IE8 does not support DOMContentLoaded. You can use the readystatechange event to replace the DOMContentLoaded event in earlier versions of IE.

ReadystatechangeEvents occur in the Document Object and XMLHttpRequest object. They are triggered when their readyState attributes change.

The following events are related to window behavior:

Scroll events are triggered when document or document elements are rolled, mainly when you drag the scroll bar.

Iii. Mouse event MouseEvent object: constructor new MouseEvent (typeArg, mouseEventInit); built-in mouse event mousedown mouseup click dblclick, mousemove mouseover mouseout, mouseenter mouseleave, contextmenu, wheel altKey, ctrlKey, metaKey, shiftKey attribute returns a Boolean value, indicating whether to press a key when a mouse event occurs; button returns the mouse key information of the event (values:-, 1, 2, switch can be used to select the execution points). The buttons attribute returns a value of three bits, indicating which keys are simultaneously pressed. clientY returns the coordinates of the mouse position relative to the upper left corner of the browser window, the Unit is pixel screenX, and screenY returns the coordinates of the mouse position relative to the upper left corner of the screen. The unit is pixel moveme. NtX and movementY return a displacement in pixels, indicating the distance between the current position and the previous mousemove event. The value is equal to currentEvent. movementX = currentEvent. screenX-previusevent. the screenX relatedTarget attribute returns the secondary node of the event, that is, the node corresponding to the target attribute. For example, mouseout target indicates the node to be left, And relatedTarget indicates the node to be entered. For events with no secondary nodes, this attribute returns the null wheel event, which is an event related to the mouse wheel. The browser provides a WheelEvent constructor, new WheelEvent (typeArg, mouseEventInit), deltaX: returns a value indicating the horizontal scroll of the scroll wheel. DeltaY: return a value, indicating the vertical scroll volume of the scroll wheel. DeltaZ: return a value, indicating the zaxis scroll volume of the scroll wheel. DeltaMode: returns a value, indicating the unit of scrolling. It is applicable to the preceding three attributes. 0 indicates pixels, 1 indicates rows, and 2 indicates pages. 4. keyboard event KeyboardEvent object: constructor new KeyboardEvent (typeArg, KeyboardEventInit), built-in event keydown: triggered when the keyboard is pressed. Keypress: as long as the key is not Ctrl, Alt, Shift, or Meta, The keypress event is triggered. Keyup: this event is triggered when the keyboard is released. altKey, ctrlKey, metaKey, and shiftKey return a Boolean value, indicating whether to press the corresponding key property to return a string, indicating the name of the key to be pressed. If you press a control key and a symbol key at the same time, the key name of the symbol key is returned. For example, press Ctrl + a to return. If the key name cannot be recognized, the returned string Unidentified 5. Progress event ProgressEvent object: constructor new ProgressEvent (type, {lengthComputable: leleanvalue, loaded: aNumber, total: aNumber }) the default values are false, 0, and 0, respectively. A progress event is used to describe the process of an event, for example, the HTTP request process sent by the XMLHttpRequest object, , <audio>, <video>, <style>, and <link> load external resources. Both the download and upload events have progress events. LengthComputable: returns a Boolean value, indicating whether the current progress has a computable length. If it is false, the current progress cannot be measured.
Total: returns a value indicating the total length of the current progress. If a resource is downloaded through HTTP, it indicates the length of the content, excluding the length of the HTTP header. If the lengthComputable attribute is false, the total attribute cannot obtain the correct value.
Loaded: returns a value indicating the number of completed tasks in the current progress. This attribute is divided by the total attribute to get the percentage of the current progress. If (e. lengthComputable) {var percentComplete = e. loaded/e. total ;}
It includes the following events: abort events: triggered when a progress event is aborted. If an error occurs, the process is aborted and the event is not triggered. Error Event: triggered when the resource cannot be loaded due to an error and will not bubble up. The listening function of the error event should be placed in the HTML attribute of the img element to ensure that the loading error will be executed. Load event: triggered when the progress ends successfully. Loadstart event: triggered when the progress starts. Loadend event: triggered when the progress is stopped, followed by the error event, abort event, and load event. The loadend event listening function can be used to replace the listening function of the abort event, load event, and error event. The loadend event itself does not provide the reason for the progress, however, you can use it to perform all the operations required to end the process. SS event: when the operation is in progress, it is continuously triggered by the transmitted data block. Timeout event: triggered when the progress exceeds the time limit. 6. Drag event object: Drag refers to an object. You can press the mouse key on it, drag it to another location, and release the mouse key, put this object there. There are several types of drag objects, including Element nodes, images, links, and selected text. In HTML webpages, except for Element nodes, drag is not allowed by default. Other elements (images, links, and selected text) can be dragged directly. To make the Element Node drag, you can set the draggable attribute of the node to true. The draggable attribute can be used for any Element node, but the image (img Element) and link (a Element) can be dragged without this attribute. When this attribute is used, it is often set to false to prevent dragging. Note: Once the draggable attribute of an Element node is set to true, you cannot use the mouse to select text or subnodes in the node. When the Element node or selected text is dragged, the drag event is triggered continuously, including the following events::

Drag event: a drag event is triggered continuously on the dragged node. Dragstart event: triggered at the start of the drag operation on the dragged node. The target attribute of the event is the dragged node. Generally, you should specify the dragged data in the event listening function. Dragend event: When the drag ends (release the mouse key or press the escape key), it is triggered on the dragged node. The target attribute of this event is the dragged node. It is triggered on the same node as the dragStart event. The dragend event is always triggered regardless of whether the drag is performed across windows or is canceled halfway. Dragenter event: this event is triggered on the current node when it is dragged to the current node. The target attribute of this event is the current node. Generally, you should specify whether to allow the data to be dropped on the current node in the event listening function. If the current node does not have the event listening function, or the listening function does not perform any operations, it means that data cannot be put down on the current node. Visually, It is dragged to the current node, which is also set in the listener function of this event. Dragover event: It is triggered continuously on the current node when it is dragged to the top of the current node. The target attribute of this event is the current node. This event is similar to the dragenter event. By default, the effect of the current drag event (the dropEffect attribute of the DataTransfer object) is reset to none, that is, the dragged node cannot be put down, therefore, if data can be dropped on the current node, the preventDefault method is usually used to unreset the drag effect to none. Dragleave event: this event is triggered on the current node when it is dragged out of the current node range. The target attribute of this event is the current node. Visually show dragging and dropping the current node, and set it in the listener function of this event. Drop event: this event is triggered when the dragged node or selected text is released to the target node. Note: If the current node does not allow drop, the event is not triggered even if the mouse key is released above the node. If you press the Escape key, canceling this operation will not trigger this event. The event listening function is responsible for retrieving and processing the drag data.

Pay attention to the following precautions for the drag event::

1. The drag process only triggers the above drag events. Although the mouse is moving, the mouse events are not triggered. 2. Drag the file from the operating system to the browser without triggering the dragStart and dragend events. 3. The dragenter and dragover event listening functions are used to specify the data that can be dropped. Because most areas of the web page are not suitable for the drop target node, the default settings for these two events are that the current node does not allow drop. If you want to drop the dragged data on the target node, you must first stop the default actions of the two events or cancel the two events. <Div ondragover = "return false"> or <div ondragover = "event. preventDefault ()">

A drag event is represented by a DragEvent object, which inherits the MouseEvent object. The DragEvent object has only one unique attribute DataTransfer, and others are inherited attributes. The DataTransfer attribute is used to read and write data transmitted in a drag event. All drag events have a dataTransfer attribute to save the data to be transmitted. The value of this attribute is a DataTransfer object. The dragged data stores two types of data: Data Type (also known as format) and data value. The data type is a MIME string, such as text/plain or image/jpeg. The data value is a string; DataTransfer Object Attributes:

Set the dropEffect attribute to show the effect of dropping a node. Possible values include copy (copy a dragged node) and move (move a dragged node), link (create a link pointing to the dragged node), none (unable to put down the dragged node ). Other values are invalid.
The effectAllowed attribute sets the effects allowed in this drag. Possible values include copy, move, link, copyLink, copyMove, linkMove, all, none, and uninitialized (default value, equivalent to all ). If a certain effect is not allowed, the user cannot achieve this effect in the target node.
The files attribute is a FileList object that contains a set of local files that can be transferred during the drag operation. If this drag operation does not involve files, the FileList object with an empty property is displayed. You can use the files attribute to read information about a drag object. To read the file content, useFileReaderObject.
The types attribute is an array that stores the data format of each drag, such as 'text/uri-list'

DataTransfer object method:

The setData method is used to set the data of the specified type contained in the event. It accepts two parameters, the first is the data type, and the second is the specific data. If the specified type does not exist in the existing data, the type is written to the types attribute. if it already exists, the existing data of this type is replaced.
event.dataTransfer.setData("text/plain", "Text to drag");
The getData method accepts a string (indicating the Data Type) as a parameter and returns the data of the specified type contained in the event (usually the data added using the setData method ). If the specified data type does not exist, an empty string is returned.
event.dataTransfer.getData(types[0]);
The clearData method accepts a string (indicating the Data Type) as a parameter to delete data of the specified type contained in the event. If no data type is specified, all data is deleted. If the specified type does not exist, the original data is not affected.
event.dataTransfer.clearData("text/uri-list");
SetDragImage can be customized for this image. It accepts three parameters. The first parameter is an img image element or a canvas element. If it is omitted or null, it uses the exterior of the dragged node, the second and third parameters are the abscissa and right coordinates of the mouse relative to the upper left corner of the image.
event.dataTransfer.setDragImage(img, 0, 0);

7. Touch events: The touch API consists of three objects. Each Touch object represents a contact. Each contact is described by its position, size, shape, pressure, and target element. The TouchList object represents a list of multiple contacts. Touch object:Represents a touch point. A touch may be a finger or a touch pen. It has the following attributes:

The identifier attribute indicates the unique identifier of the Touch instance. It remains unchanged throughout the touch process. Var id = touchItem. identifier;
The screenX and screenY attributes indicate the horizontal and vertical coordinates of the touch point relative to the upper left corner of the screen, respectively, and are irrelevant to whether the page is scrolling;
The clientX and clientY attributes indicate the horizontal and vertical coordinates of the touch point relative to the upper-left corner of the browser's viewport. They are irrelevant to whether the page is scroll or not.
The pageX and pageY attributes indicate the horizontal and vertical coordinates of the touch point relative to the upper left corner of the current page, including the displacement radiusX and radiusY attributes of the Page scrolling, respectively, returns the X and Y axes of the affected elliptical ranges around the touch point, in pixels. The rotationAngle attribute indicates the Rotation Angle of the oval in the touch area, measured in degrees between 0 and 90 degrees. When the fingertip is exposed to the screen, the touch range forms an elliptic. These three attributes are used to describe the elliptical area. The force attribute returns a value between 0 and 1, indicating the touch pressure. 0 indicates no pressure, and 1 indicates the maximum pressure that the hardware can recognize. The target attribute returns an Element node, which indicates the node that occurs during touch. When this contact is first tracked (in the touchstart event), the contact is located in the HTML element. even when the contact moves, the contact location has left the valid interaction area of the element, or the element has been removed from the document. it should be noted that if this element is removed during the touch process, this event will still point to it, but will no longer bubble this event to the window or document object. therefore, if an element may be removed during the touch process, the best practice is to bind the listener of the touch event to the element itself to prevent the element from being removed, events that bubble from the element cannot be detected from its upper-level element. read-only attribute.

TouchList object:Is an object similar to an array. A member is all the touch points related to a touch event. For example, if you Touch with three fingers, the generated TouchList object has three members, each of which corresponds to a Touch object. The length attribute of the TouchList instance. The number of members of the TouchList object is returned. The identifiedTouch and item methods of the TouchList instance use the id attribute and index value (starting from 0) as parameters to retrieve the specified Touch object. TouchEvent object:Indicates the event triggered by a touch. In addition to the inherited attributes, it also has its own attributes.

The keyboard-related attributes altKey, ctrlKey, metaKey, and shiftKey are read-only attributes. A boolean value is returned, indicating whether to press a key while touching the key.
ChangedTouchesProperty returns a TouchList object that contains all the Touch objects (related Touch points) triggered by the current Touch event ). It contains Touch objects that represent all contacts whose status has changed from the last Touch event to the event. Read-only attribute.
TargetTouchesProperty returns a TouchList object that contains all the active touch points within the target Element Node of the touch.
TouchesProperty returns a TouchList object that contains all the Touch objects of the contacts that are currently in Touch plane, no matter which element they start from, or whether their status has changed. Read-only attributeTypeAttribute refers to the type of this touch event.Target attributeThe target element of this touch event. This target element corresponds to the starting element of the contact in TouchEvent. changedTouches (described in later event types), but note that the starting elements of other contacts in this event may be different. In case of occurrence, the target associated with each individual contact should be used.

You can use the TouchEvent. type attribute to view the types of touch events.:

Touchstart: triggered when the user is in touch with the touch screen. Its target attribute returns the touch Element node.
Touchend: triggered when the user no longer accesses the touch screen (or removes the screen edge). Its target attribute is consistent with the target attribute of the touchstart event, and its changedTouches attribute returns a TouchList object, contains all Touch points that are no longer touched ).
Touchmove: triggered when a user moves a touch point. Its target attribute is consistent with the target attribute of the touchstart event. This event is also triggered if the touch radius, angle, and intensity change. Touchenter is triggered when the contact enters an element. This event does not have a bubble process. Touchleave is triggered when the contact leaves an element. This event does not have a bubble process.
Touchcancel: triggered when the contact is interrupted for some reason. There are several possible causes (depending on the device and the browser): 1. The touch is canceled due to an event: for example, the touch process is interrupted by a modal pop-up box. 2. The contact leaves the document window and enters the browser's interface elements, plug-ins, or other external content areas. 3. When the number of contacts generated by the user exceeds the number supported by the device, the earliest Touch object in the TouchList is canceled.

function handleMove(evt) {
Evt. preventDefault (); // prevents the browser from processing touch events and mouse events
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    var id = touches[i].identifier;
    var touch = touches.identifiedTouch(id);
    console.log(touch.pageX, touch.pageY);
  }
}