A Brief Analysis of JavaScript Event Usage

This article describes the usage of JavaScript events. Share it with everyone for reference, as follows:

JavaScript interacts with HTML through events.

Event Flow

The event flow stipulates the triggering rules and order of events. DOM2It is stipulated that the event flow includes three stages: event capture -> Target Trigger Exception -> Event Bubbling. DOM2It is stipulated that event handlers should not be called in the event capture phase, but all major browsers ignore it. DOM2The operation function of the level event handler: the third parameter of addEventListener and removeEventListener turns this into DIY, which is a compromise, and at the same time makes beginners think that the management of dom is in chaos.

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);

Updating the third parameter of addEventListener and removeEventListener in the above js to true, and comparing it with false, can roughly understand the event flow.

Event

An event is an action performed by a user or the browser itself.

The way to add an event handler

The function that responds to an event is called an event handler.

The following are the ways to specify an event handler:

HTML attribute specification.

If an element supports an event, there is a corresponding HTML attribute, which can be used to add an event handler to it.

<button id="btn" onclick="alert('button click')">button</button>/button>

DOM Level 0. Assigning a function to an element's event handler attribute: this is the traditional way to specify event handlers in JavaScript, which is still in use today.

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="Button";
};

DOM2Level.

Through addEventListener and removeEventListener to manage the events of elements. All DOM nodes contain these two methods, and they both contain three parameters, taking add as an example:

addEventListener(event name, event handler, whether to execute the event handler during event capture)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//Note that the following 'remove' is completely useless; these two anonymous functions are actually different objects.
btn.removeEventListener("click",function(){alert(this.id);},true);

In the above code, references pointing to the same object are considered to be the same, and the same declaration generates two objects that look the same but are stored in two different locations in the heap.

Event object

When an event is triggered on the DOM, an event object 'event' is generated. No matter what event handler is specified, the 'event' object will be passed in: to be precise, the 'event' object is created in the execution environment of the called function, and according to the definition of the scope chain, it can be known how it is passed in.

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//When the 'btn' button is clicked, the message 'msg:click' is displayed.

The 'event' object contains rich members, used to control access to events, and the following are the common members of all events.

target: The target element directly affected by the action that triggers the event.
currentTarget: Equal to this, the element on which the event handler acts.
eventPhase: The stage in the event flow when the event handler is called.1,2,3 The three values correspond to the three stages of the event flow.
type: Event type. The click event corresponds to String: "click".

Event Types

Event types are divided into the following categories:

UI Events.
Focus Events.
Mouse and Scroll Wheel Events.
Keyboard and Text Events.
Composite Events.
Change Events.
HTML5Events.
Device Events.
Touch and Gesture Events.

PS: For detailed explanations of JavaScript events, you can refer to the online tools of this site:

Comprehensive Guide to JavaScript Events and Functions:
http://tools.jb51.net/table/javascript_event

Readers who are interested in more content related to JavaScript can check the special topics of this site: 'Summary of JavaScript Window Operations and Techniques', 'Summary of JSON Operations in JavaScript', 'Summary of JavaScript Switching Effects and Techniques', 'Summary of JavaScript Search Algorithm Techniques', 'Summary of JavaScript Animation Effects and Techniques', 'Summary of JavaScript Error and Debugging Techniques', 'Summary of JavaScript Data Structures and Algorithm Techniques', 'Summary of JavaScript Traversal Algorithm Techniques', and 'Summary of JavaScript Mathematical Operation Usage'.

I hope the content described in this article will be helpful to everyone in JavaScript program design.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)