A brief analysis of JavaScript event usage

The examples in this article describe the usage of JavaScript events. Share it with everyone for your reference, the details are as follows:

JavaScript interacts with HTML through events.

Event flow

Event flow specifies the triggering rules and sequence of events. DOM2 stipulates that the event flow includes three stages: event capture -> target triggering -> event bubbling. DOM2 stipulates that event handlers should not be called during the event capture phase, but major browsers do not support this. The third parameter of the DOM2-level event handler operation function pair: addEventListener and removeEventListener turns this thing into DIY. This is a compromise and makes beginners think that DOM management is a mess.

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

Update the third parameter in addEventListener and removeEventListener in the above js to be true. Compare the effect when it is false, and you can roughly understand the event flow.

Events

Events are certain actions performed by the user or the browser itself.

How to add an event handler

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

Specify event handlers in the following ways:

HTML attribute specification.

If an element supports a certain event, then there is a corresponding HTML attribute, and you can use this attribute to add an event handler to it.

<button id="btn" onclick="alert(&#39;button click&#39;)">button</button>

DOM Level 0. Assign a function to the event handler attribute of an element: This is the traditional way of specifying event handlers using JavaScript and is still used today.

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

DOM Level 2.

Manage element events through addEventListener and removeEventListener. All DOM nodes contain these two methods, and they both contain three parameters. Take add as an example:

addEventListener (event name, event handling function, whether to execute the event handler when the event is captured)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

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

Event Object

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

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时，弹出msg:click

event contains rich members for controlling access events. The following are the common members of all events.

target: The target element that the action that triggers the event directly acts on.
currentTarget: equal to this, the element the event handler acts on.
eventPhase: The stage in the event flow when the event handler is called. The three values ​​​​1, 2, and 3 correspond to the three stages of the event flow respectively.
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 wheel events.
Keyboard and text events.
Compound events.
Change events.
HTML5 events.
Device events.
Touch and gesture events.