JS Event Propagation

Event handling
The client JS program uses an asynchronous event-driven programming model. In this case, when a document, a browser, an element occurs something, it generates an event.

For example, an event is triggered when a browser finishes loading a document. The event will have a function to process, that is, the callback function

This is not just for the Web interface, but for all applications that use the graphical interface.

Event Type
Event classification
Device-dependent input events
Some events are directly related to the specific input device. such as the mouse and keyboard.

Touchmove This event occurs when the contact is on a touch plane

Device-Independent input events
The Click event indicates that the linked event was activated. Trigger the event with a mouse, button, or touch on a mobile device

User Interface Events
Typically used for HTML form elements, including a focus event where the text input field gets keyboard focus, the Submit button will trigger the Submit event

Status Change Events
Not triggered by a user activity by a network or browser activity, indicating a change in a life cycle or related state.

Online returns the browser's networking status

Specific API Events
Some Web APIs will have their own event types
Drag and Drop API DragStart when the user drags an element, or selects a text, the event is triggered

Timers and error handlers
The timer triggers the event after the specified time, the error handler, and the try catch corresponds to a response, which is thrown asynchronously

Traditional event Types
Form Events
The Submit and reset events are triggered when the form is submitted and the form is reset, and when the user interacts with the class button (including radio and check), the Click event occurs and the change event is triggered when the user enters text, selects an option, or selects a check box to alter the state of the corresponding form element. A form element that changes focus through the keyboard will trigger the focus and blur events when it gets and loses focus.
The event handler enables you to cancel the default action of the submit and reset events. This is also true for some click events, where focus and Clur events do not bubble, but all other form events are available.
The input event is triggered whenever the user enters text.

Window Event
The window event refers to the occurrence of an event that is related to the browser window itself rather than to any particular document content displayed in the window.

Load Event
The Load event is triggered when the document and all its external resources (pictures) are fully loaded and displayed to the user.

Unload events
The Unload event, which is triggered when the user moves away from the current document to another document.
The Unload event handler can be used to save the user's state, but it cannot remove the user from being diverted elsewhere.

Beforeunload Events
This event will ask the user if they are sure to leave the current page. If the Beforeunload callback function returns a string, the string will appear on the dialog box displayed to the user for confirmation before the new page is loaded, so that the user will have a chance to cancel the jump to stay on the current page

Note that the event is only a jump change on the current page, etc., and the conversion tag does not trigger the event

OnError Property
This is a property of a Window object. When JS goes wrong, it will trigger its

Other
Replacement elements such as the IMG element can also be registered with the load and error event handlers. This event is triggered when an external resource is fully loaded or a blocking load error occurs. Some browsers also support the about event, which is triggered when the graph is strong because the user stops loading the process and causes the event to fail.
The focus and Blur events are also window events, which are triggered when the browser window Gets or loses keyboard focus from the operating system
When the user resizes the browser window or scrolls it to trigger the resize and scroll events, the scroll event can also trigger on any document element that can be scrolled, such as the overflow property of the CSS.

Mouse events
Mouse events occur when a user moves and clicks a mouse on a document. These events are triggered on the deepest nested element corresponding to the mouse pointer. But it bubbles until the top of the document.
The Clientx and Clienty properties specify the position of the mouse in the window coordinates. The button and which properties specify which mouse button is pressed.
When the mouse-assist key is pressed, the corresponding properties for Altkey and Ctrlkey and Metakey and Shiftkey are set to true, and for the Click event, the Detail property specifies whether it is clicked, double-clicked, or three-click.
The MouseMove event is triggered whenever the user moves and drags the mouse, triggering the MouseDown and MouseUp events when the user presses or releases the mouse button.
After the MouseDown and MouseUp event queues, the browser also triggers the Click event, and if the user clicks the mouse two times in a short time, the second event is the Dblclic event, and when the right mouse button is clicked, the browser displays the context menu, before the menu is displayed, Also triggers the ContextMenu event, which is the simplest way to get a right-click Notification if canceling the event will block the display of the menu.
When the user moves the mouse pointer so that it hovers over the new element, the browser triggers the MouseOver event on that element, and the browser triggers the Mouseout event when the mouse moves the pointer so that it does not hover over an element. (The event has a Relatedtarget attribute indicating other elements involved in this process)
When the user scrolls the mouse, the browser triggers the MouseWheel event, passing the event object properties to specify the size and direction of the wheel rotation.

Keyboard events
When the keyboard focuses on the Web browser, each time the user presses or releases the keys on the keyboard will produce an event, the keyboard shortcut leaf can also be eaten by the browser and the operating system, the JS event handler is not visible, regardless of any document element gets keyboard focus will trigger keyboard events, and will bubble to the Window object,

Touch screen and mobile device events
When the user rotates the device, a Orientationchange event is generated, with a zoom and rotate gesture, and a Getsturestart event is generated when the gesture starts, and a Gestureend event is generated when the gesture ends. Between these two events is the Gesturechange event queue that tracks the gesture process, with the event object property being passed as scale and rotation

The scale value of the clenched gesture is less than 1.0
The scale value of the open gesture is greater than 1.0
Rotation the angle at which the finger rotates at the beginning of the event. Positive value in degrees indicates clockwise rotation

The Touchstart event is triggered when the finger touches the screen, and the Touchmove event is triggered when the finger moves and the Touchend event is triggered when the finger leaves the screen, and the event object passed by the touch event has a changedtouches attribute. This property is a class array object with each element describing the location of the touch.

The Orientationchanged event is triggered on the Window object when the device allows the user to rotate from the vertical screen to landscape mode. The Orientation property of the object can give the current orientation, with a value of 0, 90, 180, or 90

Registering event handlers
To set properties on an event target object or document element
One way to pass an event handler to an object or document element
Set the JS object property to the event handler
The name of the event handler property is made up of on followed by the event name. Onclick,onchange,onload,onmouseover

OnLoad when an object's resource is loaded, the OnLoad event of the object is triggered and then the onsubmit event of the form is bound to a handler function

OnSubmit This event will be triggered when the form is submitted

Chestnut below demonstrates the process of validating a form when submitted
Where the Validate function is a custom form validation function whose function parameter this points to the ELT

Window.onload = () + = {
Find a

JS Event Propagation