Section 56 Event Type - Javascript for Web Front-End Development - Wang Wei

This content is the courseware of "Javascript Video for Web Front-end Development", please cooperate with the "Javascript" video course of Master Brother.

There are many types of events, and different event types have different information;

DOM2-level events specify the following five types of events:

UIEvent (user interface) events, which are triggered when the user interacts with elements on the page;

MouseEvent mouse events, which are triggered when a user performs an action on a page via the mouse;

KeyboardEvent keyboard events: triggered when an action is performed on a page via the keyboard;

HTML events: triggered when the browser window changes or a specific client/server interaction occurs;

MutationEvent change event: Triggered when the underlying DOM structure changes;

The DOM3 level redefines these events on top of DOM2 and adds a few events:

FocusEvent focus event: triggered when an element gains or loses focus;

WheelEvent wheel event: triggered when a mouse wheel (or similar device) is used;

Text event: Triggered when text is entered in text;

Synthesis event: Triggered when a character is entered for the IME (Input Method Editor);

The HTML5 specification also defines a large number of events: events such as history management, drag-and-drop, cross-text communication, and multimedia;

In addition to these events, some browsers implement other proprietary events in the DOM and BOM as well;

From another point of view, events can be roughly divided into several categories:

Device-dependent input-based events: These events depend on specific input devices, such as mice and keyboards, and also include touch events; for example, mousedowns, mousemoves, etc., can only be achieved through mouse devices, while keysdowns or keyspress can only be achieved through keyboard devices, touchmove or gesturechange can only be achieved through touch devices;

Device-independent input-type events: not dependent on a specific input device, such as click events, can be achieved by mouse clicks, keyboards or touch devices; and textinput events, that is, can be achieved by keyboard keys, can also be implemented in cut and paste, and even through handwriting devices;

User interface events: usually refers to some events registered on form controls, such as focus events where text boxes get focus, change events where controls change values, or submit events that submit forms;

State change event: an event that indicates some lifecycle or related state change, such as a load event or a DOMContentLoaded event or a document status readystatechange event; such as a popstate event, an online or offline event for HTML5's history management;

SPECIFIC API events: events defined in HTML5 and related specifications, such as: drag-and-drop events, multimedia-related events;

UIEvent event:

UIEvent events represent simple user interface events, but contain some events that are not necessarily related to user actions, and are primarily related to the focus of the element;

The event class inherits from the Event class; it also derives other subclasses such as MouseEvent, TouchEvent, FocusEvent, KeyboradEvent, WheelEvent, InputEvent, and PositionEvent;

It defines some properties itself, such as: detail, layerX, layerY, pageX, pageY, sourceCapabilities, view, and whych;

UIEvent-related events:

DOMActive: Indicates that the element has been activated by a user action (via mouse or keyboard);

load: Triggers on the window when the page is fully loaded, on the frameset when all frames have loaded, on the < img > element when the image is loaded, or on the < object > element when the embedded content load is complete;

unload: Triggers on the window when the page is completely unloaded, on the frameset when all frames are unloaded, or on the < object > element after the embedded content is unloaded;

abort: When the user stops the download process, if the embedded content is not loaded, it is triggered on the < object> element;

error: Triggers on the window when a Javascript error occurs, on < img > element when an image cannot be loaded, on < object > element when embedded content cannot be loaded, or on a frameset when one or more frames cannot be loaded;

select: Triggered when the user selects one or more characters in a text box (<input> or <textarea>);

resize: Triggered on the window or frame when the size of the window or frame changes;

scroll: When the user scrolls the content in an element with a scroll bar, it fires on that element;

The above events, in the DOM2 level events, in addition to the DOMActive, other events are HTML events, so after determining whether the browser supports DOM2 level events, finally check it, such as:

Determine if your browser supports DOM3-level events such as:

In addition, most of these events are related to window objects or form controls, so some places also call these events window events, because most of these events are related to the browser window;

load load event: When the page is fully loaded (including all external resources such as images, Javascript files, and CSS files), the load event of the window object is triggered, which is also the most commonly used event in Javascript;

There are two ways to define an onload event handler:

Add an onload attribute to the <body > element;

In general, any event that occurs on a window can be specified in the <body> element with the corresponding attribute, since the window element is not accessible in HTML;

Images can also trigger load events, either in the DOM or image elements in HTML;

or:

When creating a new < img > element, you can specify an event handler for it, just specify the src attribute to download, and do not need to be added to the DOM tree, such as:

You can also use DOM0-level Image object implementations, such as:

There are also some elements that support load events in a non-standard way; in standard browsers, <script > elements also trigger a load event to determine whether the dynamically loaded js file has been loaded, and the download will only start after the scr attribute of the <script > is set and added to the document;

In this case, the target of the event object and the current Target or srcElement reference are both nodes > <script;

IE8 and below browsers do not support load events on <script > elements, but the above code does not throw exceptions;

Browsers also support load events on <link > elements, such as:

Similar to <script >, specifying its href attribute and adding it to the document will not be downloaded;

unload event: Triggered after a page has been completely unloaded, or switched from one page to another, or a refresh operation also triggers an unload event, such as:

Throw an exception: blocked alert during unload, that is, the page is blocked, and in the unload event handling, blocking is not allowed, such as pop-up windows, etc., will cause blocking; the correct approach:

Unload event features:

The event object of the unload event contains only the target (or srcElement) attribute, and the value is documented;

The state at the time of the unload event should be:

All resources still exist (images, iframes etc.)

All resources are not visible to end users;

Invalid interface interaction (window.open, alert, confirm, etc., which causes blocking);

Errors do not stop the process of uninstalling the document;

The unload event executes for a short time and is fired after everything has been unloaded, so it is not suitable for handling regular code, generally canceling (or clearing) object references on the page to avoid memory leaks;

Example: Count the length of time a page stays, such as:

In addition, unload events are not bubbling and cannot be canceled;

Similarly, DOM2-level events stipulate that the unload event should be triggered on <body> element rather than the window object, but all browsers implement the unload event on the window;

error event: The window.onerror property looks like an event handler and fires it when Javascript makes an error, however, it is not a true event handler because its parameters are not an event object, but 5 parameters, from which detailed error information can be obtained;

message: an error message, a message that describes the error;

URL: The URL of the document in which the Javascript that threw the error;

line: The number of lines in the document where the error occurred;

column: the number of columns in which the error occurred;

error: Error object, this erroror is also known as the global error object;

However, if you use a DOM2-level event handler, the arguments in it are the event object;

The ErrorEvent class inherits from the Event class, which defines the following properties:

message: read-only, returns information containing a description of the error that occurred;

filename: read-only, contains the URL of the script text in which the error occurred;

lineno: read-only, the line number where the error occurred;

colon: read-only, the column number where the error occurred;

error: read-only, the Error object thrown when an error occurs;

These 5 properties also correspond to the 5 parameters of the window.onerror property;

If it is a onerror event of the picture, it is a real event, which has only one parameter, which is an event object;

abort event: when the loading of a resource has been aborted, the event will be triggered;

resize event: When the size of the browser window is resized, it triggers the resize event, which is triggered on the window;

In standard browsers, event objects have target properties and values are window objects, but IE does not provide any properties;

Changing the size of the browser by 1 pixel will trigger the resize event, and then repeat the trigger with the change;

The resize event is also triggered when the window is maximized or minimized; however, some browsers fire the event twice or more times when maximized or minimized, which can be resolved using setTimeout(), which is to delay the execution of certain code, such as:

Example: Varies with window size, such as:

example:

Resize events can only be registered on the window object, it does not support registration on DOM elements, if you want to listen to the DOM element's resize event, the best solution is to use custom events;

scroll event: Although it occurs on a window object, it actually represents a change in the corresponding element in the page; that is, the change can be tracked as the window or other elements are scrolled to ensure that something is always visible on the screen;

The event object does not provide scroll-related information, just a normal Event object;

In promiscuous mode, this change can be monitored by < body> elements of the rollLeft and shuttleTop; in standard mode, this change is reflected by < html > elements;

Similar to the resize event, the scroll event is triggered repeatedly during the time the document is scrolled, so try to keep the code as simple as possible in the scroll event handler;

Example of the scroll event:

The scroll event can also be registered on element elements; for example:

Event stabilization (debounce) and throttling (throttle):

Prevent events from being triggered frequently; related events are: mousemove, keydown, keypress, keyup, resize, scroll, etc.;

Stabilization: The function is executed only once in n seconds after triggering a high-frequency event, and if the high-frequency event is triggered again within n seconds, the time is recalculated; for example:

In event stabilization, the timing of clearing the timer is critical, and you must clear all timers before the new timer is generated, if after that, all timers are cleared and the objective function is not executed once; or:

Example: Input box validation

Throttling: Stabilization is the triggering of multiple events, the objective function is only executed once, no matter how much time it takes to trigger these events; while throttling is only executed once in a certain period of time, diluting the execution frequency of the function, and thus achieving the purpose of slowly executing the objective function; such as:

Use setTimeout():

Using setInterval():

Put the event handler in the setInterval() function, every once in a while, to monitor whether a roll event has occurred, and then execute, and the roll event just changes the value of the scrolled, will not affect performance, such as:

To use a timestamp:

To use a switch:

Set a switch, there can only be one trigger execution at a time, and set the execution timing for a period of time to execute, and then unlock after the execution is completed; such as: scrolling events;

Comparison of the two:

Throttling In a certain period of time, the objective function can be executed once, limiting the frequency of execution of the objective function, no matter how many times the event is triggered;

Stabilization is multiple triggering events, and the objective function is executed only once, regardless of how long it takes to trigger these events;

The throttling function limits the execution frequency of the objective function, has the effect of continuous change, is suitable for operations that focus on the change process, and can adjust the execution frequency of the objective function to make the change smoother, such as animation, performing certain operations when changing the window, etc., commonly used events resize, scroll, mouseWheel, touchmove, mouseover, etc.;

The stabilization function is suitable for operations that pay more attention to the result, less attention to the operation process, common events are input, keyup, etc.;

FocusEvent Focus Events:

Focus events are triggered when a page element gains or loses focus, or when some object calls the focus() and blur() methods; these events are used in conjunction with the document.hasFocus() method and the document.activeElement property to know where the user is on the page;

There are the following 6 focus events:

blur: Triggered when an element loses focus, the event does not bubble;

focus: Triggered when the element gains focus, the event does not bubble;

DOMFocusIn: Triggered when an element gains focus, the event is equivalent to the HTML event focus, but it bubbles; DOM3 level events discard it and should use focusin; FF and earlier versions of IE are not supported;

DOMFocusOut: Triggered when an element loses focus, the event is html event blur equivalent, but it bubbles; DOM3 level events discard it and should use focusout; FF and earlier versions of IE are not supported;

focusin: Triggered when an element gains focus, the event is equivalent to the HTML event focus, but it bubbles;

focusout: Triggered when an element loses focus, the event is the HTML event blur equivalent, but it bubbles;

To determine if your browser supports these events, you can detect:

Elements that can obtain focus events generally refer to window or form controls or hyperlinks or editable elements, called focusable elements; however, ordinary elements in IE can also obtain focus;

The two most important of these events are focus and blur, both of which were supported by all browsers in the early days of Javascript, the biggest problem with these two events is that they do not bubble, so there are two pairs of events, IE's focusin and focusout and Opera's DOMFocusIn and DOMFocusOut, and later IE's way is incorporated into the standard way by DOM3-level events;

FocusEvent class:

Represents a focus-related event class that inherits from the UIEvent class;

It only adds a property related Target, which represents the relevant target of this event, but in practical applications, such as when switching browser tabs, all browsers will return null for safety reasons;

When focus moves from one element in a page to another, the following events are triggered in turn:

Blur triggers on elements that have lost focus, focusout on elements that have lost focus, DOMFocusOut on elements that have lost focus, focus on elements that have gained focus, focusin on elements that have gained focus, DOMFocusIn on elements that have gained focus, and IE does not follow this order;

Among them, the event targets of blur, DOMFocusOut and focusout are elements that lose focus, while the event goals of focus, DOMFocusIn and focusin are elements that gain focus;

In addition, if both focusin and DOMFocusIn or focusout and DOMFocusOut are registered at the same time, only focusin and focusout will be triggered in IE;

In addition, except for the focus and blur events, other events can only be added through DOM2-level events, such as:

Onfocusin and onfocusout events are supported in HTML event handling except FF; DOMFocusIn and DOMFocusOut are not supported in HTML event handling;

Small app: Change the text box style, such as:

Focusin and focusout events are bubbling, so event proxies can be used such as:

Example: Validation data, such as:

Or use the focus() and blur() methods, such as:

Example: an HTML editor;

When the user presses the Enter key or loses focus, the <textarea > changes back to the < div >, whose contents become HTML in the < div >;