DOM Event Type details

One, form event:

The input event is triggered when the value of <input>, <textarea> is changed. Also, the input event is triggered when the value of the Contenteditable property is opened. One feature of the input event is that it triggers a continuous trigger, such as when the user presses the key one at a time, triggering an input event. The Select event is triggered when text is selected in <input>, <textarea>. The change event is triggered when the value of <input>, <select>, <textarea> is changed. The most significant difference from the input event is that it does not trigger continuously, only when all modifications are complete, and the input event will inevitably cause a change event. Specifically, it is divided into the following situations.

triggered when a radio box (radio) or check box (checkbox) is activated.

triggered when the user commits. For example, complete the selection from the list below (select) and complete the selection in the date or file input box.

triggered when the value of a text box or TEXTAREA element has changed and loses focus.

The reset event is triggered by the form element when the form is reset (all form members are returned 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 relate to the loading and unloading of the Web page : The beforeunload event is triggered when the window is about to close, or if the document and Web resources are about to unload. It can be used to prevent users from improperly closing Web pages. The default action for this event is to close the current window or document. If Event.preventdefault () is called in the listener function, or a non-null value is assigned to the ReturnValue property of the event object, a confirmation box is automatically popped out to let the user confirm that the page is closed. If the user clicks the "Cancel" button, the page 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 ();

});

The unload event is triggered when the window is closed or the Document object is about to unload, which occurs on objects such as window, body, frameset, and so on. Its triggering sequence is followed by the Beforeunload, pagehide events. The Unload event is only triggered when the page is not cached by the browser, in other words, if the page is unloaded by pressing forward/backward, the Unload event is not triggered. When the Unload event occurs, the document object is in a special state. All resources remain, but not visible to users, and UI interactions (window.open, alert, confirm methods, etc.) are all invalid. The uninstallation of the document cannot be stopped even if an error is thrown.

The

load event is triggered when the page loads successfully, and the error event is triggered when the page load fails. Note that the page loads from the browser cache and does not trigger the Load event. These two events actually belong to the progress event, not only to the document object, but also to the various external resources. Browsing the web is a process of loading various resources, such as images, stylesheets (style sheet), script, video (audio), Ajax requests (XMLHttpRequest), and so on. These resources and document objects, window objects, Xmlhttprequestupload objects, both trigger the Load event and the error event.

pageshow Event, Pagehide event: By default, the browser caches the page in the current session, and when the user taps the forward/Back button, the browser loads the page from the cache.

the pageshow event is triggered when the page loads, including both the first load and the load from the cache. If you want to specify the code that runs every time the page loads (whether or not cached from the browser), you can put the listener function on the event. The first time it is loaded, its trigger order is queued behind the load event. The Load event does not fire when loading from the cache, because the Web page looks in the cache normally as it does after the Load event's listener function runs, so you do not have to repeat it. Similarly, if the page is loaded from the cache, the JavaScript script initialized within the Web page (such as the listener function for the domcontentloaded event) will not execute. The Pageshow event has a persisted property that returns a Boolean value. This property is false when the page is first loaded, and this property is true when the page is loaded from the cache. if (event.persisted) {...}

The

pagehide event is similar to the Pageshow event, which is triggered when the user leaves the current page through the forward/back button. It differs from the Unload event in that the page is not saved in the cache after the listener function for the Unload event is defined on the Window object, and the page is saved in the cache using the Pagehide event. The event object for Pagehide events has a persisted property that sets this property to true to indicate that the page is to be saved in the cache, and set to false to indicate that the Web page is not stored in the cache, if the listener function for the Unload event is set. The function will run immediately after the Pagehide event. If the page contains a frame or IFRAME element, the Pageshow and pagehide events of the frame page are triggered before the main page.

The following events are related to document status:

domcontentloaded event when the HTML document is downloaded and parsed, the domcontentloaded event is triggered on the document object. At this point, only the parsing of the HTML document (the DOM generation of the entire page) is completed, and all external resources (style sheets, scripts, IFrame, and so on) may not have been downloaded at the end. In other words, this event occurs much earlier than the Load event. Note that the JavaScript script for the Web page is executed synchronously, so the listener function that defines the domcontentloaded event should be placed at the front of all scripts. Otherwise the script will delay triggering the domcontentloaded event once it has blocked. IE8 does not support domcontentloaded, you can use the ReadyStateChange event to replace the domcontentloaded event in a lower version of IE.

The

ReadyStateChange event occurs in the Document object and the XMLHttpRequest object, which is triggered when their ReadyState property has changed.

The

following events are related to window behavior:

The

Scroll event is triggered when a document or document element scrolls, primarily when the user drags the scroll bar.

third, mouse event MouseEvent object:        Constructors New MouseEvent (Typearg, Mouseeventinit), built-in mouse events MouseDown MouseUp Click DblClick, MouseMove mouseover mouseout,mouseenter mouseleave,contextmenu,wheel              & nbsp         Altkey,ctrlkey,metakey,shiftkey property returns a Boolean value that indicates whether a key is pressed when a mouse event occurs;                        button returns the mouse key information for the event (a value of -1,0,1,2, which can be selected by switch);    & nbsp                   Buttons property returns a 3 bit value indicating which keys are pressed at the same time                         Clientx,clienty returns the coordinates of the mouse position relative to the upper-left corner of the browser window, in pixels       &NB Sp                 Screenx,screeny returns the coordinates of the mouse position relative to the upper-left corner of the screen, in pixels                         Movementx,movementy Returns a displacement, in pixels, that represents the distance between the current position and the previous MouseMove event, On the value, equals Currentevent.movementx = currentevent.screenx-previousevent.screenx                        R The Elatedtarget property returns the secondary related node of the event, which is the node corresponding to the target property, such as: Mouseout target is the node that will be left, and relatedtarget refers to the node to be entered. For events with no secondary related nodes, this property returns null                       Wheel Eventsis a mouse wheel related event, the browser provides a wheelevent constructor new Wheelevent (Typearg, Mouseeventinit), DeltaX: Returns a numeric value that represents the horizontal scrolling amount of the wheel. DeltaY: Returns a numeric value that represents the vertical scrolling amount of the wheel. Deltaz: Returns a numeric value that represents the z-axis scrolling amount of the wheel. Deltamode: Returns a numeric value that represents the unit of scrolling, applicable to the above three properties. 0 represents pixels, 1 for rows, and 2 for pages.Four, keyboard event KeyboardEvent object: Constructor New KeyboardEvent (Typearg, Keyboardeventinit), built-in event KeyDown: This event is triggered when the keyboard is pressed. KeyPress: The KeyPress event is triggered as long as the key that is pressed is not CTRL, ALT, SHIFT, and meta. KeyUp: This event is triggered when the keyboard is released; Altkey,ctrlkey,metakey,shiftkey returns a Boolean value that indicates whether the corresponding key is pressed to return a A string that represents the key name that was pressed. If you press the next 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 a. If the key name is not recognized, the string is returned unidentifiedv. Progress event Progressevent Object：        constructor functionThe default values for new Progressevent (type, {lengthcomputable:abooleanvalue, loaded:anumber,total:anumber}) are false,0,0, respectively,Progress events are used to describe the process of an event's progress, such as the process of an HTTP request made by an XMLHttpRequest object, , <audio>, <video>, <style>, < Link> the process of loading external resources. Progress events occur for both download and upload.lengthcomputable: Returns a Boolean value that indicates whether the current progress has a computable length. If False, indicates that the current progress cannot be measured.
Total: Returns a numeric value that represents the overall length of the current progress. If you are downloading a resource over HTTP, it indicates the length of the content itself, without the length of the HTTP header. If the Lengthcomputable property is false, the total property cannot get the correct value.
Loaded: Returns a numeric value that represents the quantity that the current progress has completed. The attribute is divided by the total attribute, which gives you a percentage of the current progress. if (e.lengthcomputable) {var percentcomplete = e.loaded/e.total;}
        includes the following events:                       &NBS P Abort event: Triggered when a progress event is aborted. If an error occurs that causes the process to abort, the event is not triggered.                          Error Event: triggered when an error causes a resource to fail to load, does not bubble. The listener function of the error event is best placed in an HTML attribute such as an IMG element, so that a load error is guaranteed to execute absolutely.                          Load event: Triggered at the end of a successful schedule.                          Loadstart events: triggered at the start of a schedule.                          Loadend events: triggered when progress is stopped, the order of occurrence is in the error event \ Abort event after the \load event. The listener function of the Loadend event can be used to replace the listener function of the Abort event/load event/error event, and the Loadend event itself does not provide a reason for the end of the progress, but it can be used to do some of the actions that are required for all progress end scenarios.                          Progress event: When the operation is in progress, it is continuously triggered by the transferred data block 。                         TIMeout event: Progress exceeded limit trigger                       Vi. Drag Event dragevent Object: Drag refers to the user pressing the mouse button on an object, dragging it to another location, and then releasing the mouse button to place the object there. There are several types of dragged objects, including element nodes, pictures, links, selected text, and so on. In an HTML page, except that the element node is not dragged by default, other (images, links, selected text) can be dragged directly. In order for the element node to be dragged, you can set the Draggable property of the node to true. The Draggable property can be used with any element node, but the picture (img element) and the link (a element) do not add this attribute, it is possible to drag. For them, when used with this property, it is often set to false to prevent drag. Note that once an element node's Draggable property is set to True, it is no longer possible to select the text or child nodes inside the node with the mouse. when the element node or selected text is dragged, the drag event continues to be triggered, including some of the following events：

Drag event: A continuous trigger on the dragged node during the drag process. DragStart Event: The drag start is triggered on the dragged node, and the target property of the event is the dragged node. You should usually specify the dragged data in the listener function of this event. Dragend Event: When the drag ends (releasing the mouse button or pressing the Escape key) is triggered on the dragged node, the target property of the 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 across the window or is canceled halfway. DragEnter event: When dragged into the current node, triggered on the current node, the target property of the event is the current node. In this event, you should typically specify whether to allow data to be dragged down (drop) at the current node. If the current node does not have a listener function for the event, or if the listener function does nothing, it means that the data is not allowed to be dropped at the current node. Visually dragging into the current node is also set in the listener function of this event. DragOver event: When dragged over the current node, fires continuously on the current node, and the target property of the event is the current node. This event is basically similar to the DragEnter event, which resets the effect of the current drag event (the DropEffect property of the DataTransfer object) to none, which means that the dragged node is not allowed to drop, so if drop data is allowed on the current node, Typically, the Preventdefault method is used to cancel the reset drag effect to none. DragLeave event: Triggered on the current node when dragged away from the current node range, the target property of the event is the current node. Visually dragging and dropping away from the current node is set in the listener function of this event. Drop event: The dragged node or selected text, when released to the target node, is triggered on the target node. Note that if the current node does not allow drop, the event is not triggered even if the mouse button is released above the node. If the user presses the Escape key, the action is canceled and the event is not triggered. The listener function of the event is responsible for removing the dragged data and processing it.

There are a few things to note about drag events：

1. The drag-and-pull process only triggers these drag events, although the mouse is moving, but the mouse events do not trigger. 2. Drag files from the operating system into the browser without triggering the DragStart and Dragend events. A listener function for the 3.dragenter and DragOver events to specify data that can be dragged down (drop). Because most areas of the Web page do not work together as the target node for the drop, the default setting for these two events is that the current node does not allow drop. If you want to drop dragged data on the target node, you must first block the default behavior of both events, or cancel both events. <div ondragover= "return false" > or <div ondragover= "Event.preventdefault ()" >

The drag event is represented by a Dragevent object that inherits the MouseEvent object, Dragevent object has only one unique property datatransfer, and the others are inherited properties. The DataTransfer property is used to read and write data transmitted in a drag event, and all drag events have a DataTransfer property that holds the data that needs to be passed, and the value of this property is a DataTransfer object. The dragged data holds two aspects of data: the type of data (aka format) and the value of the data. The type of data is a MIME string, such as Text/plain or image/jpeg, and the value of the data is a string; DataTransfer Properties of an object：

The

DropEffect property sets the effect of dropping (drop) the dragged node, including the copy (copying the dragged node), the move (moving the dragged node), the link (creating links to the dragged node), None (unable to drop the dragged node). Setting any of these values is not valid.

the

effectallowed property sets the effect allowed in this drag, including copy, move, link, copylink, Copymove, Linkmove, all, none, Uninitialized (the default value, equivalent to all). If an effect is not allowed, the user cannot achieve this effect in the target node.

the

Files property is a FileList object that contains a set of local files that can be used for routing in a drag operation. If this drag does not involve a file, then the property is an empty FileList object. Read the information about the dragged file through the Files property. If you want to read the contents of a file, use the filereader object.

the

types property is an array that holds each dragged data format, such as ' Text/uri-list '

Methods for DataTransfer objects:

The

SetData method is used to set the data of the specified type with the event. It takes two parameters, the first one 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 property, and if it already exists, the existing data in that type is replaced.

event.dataTransfer.setData ("Text/plain", "Text to drag");

the

GetData method takes a string (representing the data type) as a parameter, returning the data of the specified type with the event (usually the data added with the SetData method). If the data of the specified type does not exist, an empty string is returned.

Event.dataTransfer.getData (types[0]);

the

ClearData method takes a string (representing the data type) as a parameter, deleting the data of the specified type with the event. If no 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 used to customize this image, it accepts three parameters, the first is an IMG picture element or a canvas element, and if omitted or null, the appearance of the dragged node is used, The second and third parameters are the horizontal and the right coordinates of the mouse relative to the upper-left corner of the picture.

event.dataTransfer.setDragImage (img, 0, 0);

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

The

Identifier property represents a unique identifier for a touch instance. It remains the same throughout the touch process. var id = touchitem.identifier;

the

Screenx property and the Screeny property, respectively, represent the horizontal and vertical coordinates of the touch point relative to the upper-left corner of the screen, regardless of whether the page is scrolled or not;

clientx Properties and Clienty properties, Represents the horizontal and vertical coordinates of the touch point relative to the upper-left corner of the browser viewport, and whether the page scrolls independently

of the

Pagex property and the Pagey property, respectively, indicating the horizontal and vertical coordinates of the touch point compared to the upper left corner of the current page, Contains the displacement RadiusX property and the RadiusY property for page scrolling, returning the X-and Y-axes of the affected ellipse range around the touch point, in pixels. The RotationAngle property represents the rotation angle of the ellipse in the touch area, in degrees, between 0-90 degrees. The fingertip touches the screen and the touch range forms an ellipse, which is used to describe the ellipse area in three properties. The Force property returns a numeric value between 0 and 1 that represents the touch pressure. 0 means no pressure, and 1 represents the maximum pressure that the hardware can recognize. The target property returns an element node that represents the node on which the touch occurred. When the contact is first tracked (in the Touchstart event), the contact is located in the HTML element. Even when the contact is moving, the position of the contact has left the effective interactive area of the element, or the element has been removed from the document. It is important to note that if this element is removed during the touch process, the event will still point to it, but it will not bubble up the event to the window or Document object. Therefore, if there are elements that may be removed during the touch process, it is a best practice to bind the listener of the touch event to the element itself, preventing the element from being removed from being able to detect events bubbling from that element on its previous level element. Read-only property.

Touchlist object:is an array-like object that is a member of all touch points associated with a touch event. For example, the user touches with three fingers, the resulting Touchlist object has three members, each finger corresponds to a touch object. The length property of the Touchlist instance that returns the number of members of the Touchlist object. The Identifiedtouch method and the Item method of the Touchlist instance use the id attribute and the index value (starting from 0) as the parameter to remove the specified Touch object. TouchEvent object:Represents the event raised by the touch. In addition to the inherited attributes, it has its own properties.

Keyboard-related properties Altkey, Ctrlkey, Metakey, Shiftkey are read-only and return a Boolean value that indicates whether a key is pressed at the same time as the touch

changedtouches The Touchlist property returns an object that contains all the touch objects (that is, related touch points) raised by the current touch event. It contains touch objects that represent all of the contacts from the last touch event to this event, where the state has changed. Read-only property.

the

targettouches property returns a Touchlist object that contains all touch points that are still active inside the target element node of the touch.

the

touches property returns a Touchlist object that contains all the touch objects of the contacts that are currently touching the touch plane, regardless of which element they originated from, and whether or not their state has changed. The read- only property Type property refers to the types of this touch event. Target Property This touches the element of the touch event. This target element corresponds to the starting element of the contact in the touchevent.changedtouches (described in the following event type), but note that the starting element of the other contacts may be different in this event. In case you should use the target associated with each individual contact.

the type of touch events can be viewed through the Touchevent.type property：

Touchstart: Triggered when the user touches the touch screen, its target property returns the element node where the touch occurred.

touchend: When the user is no longer touching the touchscreen (or when moving out of the edge of the screen), its target property is consistent with the target property of the Touchstart event. Its Changedtouches property returns a Touchlist object that contains all touch points (touch objects) that are no longer touched.

Touchmove: Triggered when a user moves a touch point, its target property is consistent with the target property of the Touchstart event. This event is also triggered if the radius, angle, and intensity of the touch change. Touchenter is triggered when the contact enters an element. There is no bubbling process for this event. Touchleave is triggered when the contact leaves an element. There is no bubbling process for this event.

Touchcancel: Triggered when the contact is interrupted for some reason. There are several possible causes for the following (specific reasons vary depending on the device and browser): 1. Because an event cancels the touch: for example, the touch process is interrupted by a modal popup box. 2. The contact leaves the document window and enters the browser's interface element, plug-in, or other external content area. 3. When the number of contacts produced by the user exceeds the number of devices supported, the first touch object in Touchlist is canceled.

function Handlemove (evt) {

evt.preventdefault ();//prevents the browser from continuing to handle touch events and also prevents the issue of 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);

  }

}

Detailed description of the DOM event type