JavaScript event Usage Analysis

The usage of JavaScript events is described in this article. We will share this with you for your reference. The details are as follows:

JavaScript interacts with HTML through events.

Event stream

The event flow specifies the trigger rules and sequence of events. DOM2 specifies that the event stream consists of three phases: Event capture-> Target trigger-> event bubbling. DOM2 stipulates that the event handler should not be called in the event capture phase, but all major browsers do not bird it. The third parameter of the DOM2-level event handler OPERATOR: addEventListener and removeEventListener makes this kind of thing DIY. This is a compromise and makes beginners think that dom management is messy.

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 of addEventListener and removeEventListener in js to true. When the parameter is set to false, the event stream can be understood.

Event

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

How to add an event handler

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

You can specify an event handler in the following ways:

HTML features are specified.

If an element supports an event, there is a corresponding HTML feature. With this feature, you can add an event handler to it.

button

DOM0 level. Assign a function to the event handler property of an element: this is a traditional method that uses js to specify the event physiological program and is still used.

Var btn = document. getElementById ("btn"); btn. onmouseover = function () {this. innerHTML = "button ";};

DOM2 level.

You can use addEventListener and removeEventListener to manage element events. All DOM nodes contain these two methods. They all contain three parameters. Take 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 the following remove, Which is useless at all. The two anonymous functions are actually different object btn. removeEventListener ("click", function () {alert (this. id) ;}, true );

In the code above, the reference pointing to the same object is considered to be the same. The same declaration generates two different objects with the same appearance but stored in two different locations on the stack.

Event object

When an event on the DOM is triggered, an event object is generated. No matter what event handler is specified, the event object will be passed in: accurately, the event object is created in the execution environment where the function is called and executed. According to the definition of the scope chain, we can see how it is passed in.

Var btn = document. getElementById ("btn"); var btnClick = function () {alert (event. type);} btn. onclick = btnClick; // when you click the btn button, msg: click appears.

The event contains a wide range of members used to control access events. The following table lists the common members of all events.

Target: The target element that triggers an event.
CurrentTarget: equal to this, the element that the event handler acts on.
EventPhase: the stage in the event stream when the event handler is called. Values 1, 2, and 3 correspond to three phases of the event stream respectively.
Type: event type. Click the String corresponding to the event: "click ".

Event Type

Event types are classified into the following types:

UI events.
Focus event.
Mouse and scroll wheel events.
Keyboard and text events.
Composite event.
Change event.
HTML5 events.
Device events.
Touch and gesture events.