JavaScript event usage Analysis _javascript skills

The examples in this article describe JavaScript event usage. Share to everyone for your reference, specific as follows:

JavaScript interacts with HTML through events.

Event Flow

The event flow sets the trigger rules and order of events. DOM2 stipulates that the event flow consists of three phases: event capture-> target triggering in addition to-> event bubbling. DOM2 stipulates that event handlers should not be invoked during the event capture phase, although the major browsers do not bird it. DOM2 event handler action function pair: The third parameter of AddEventListener and RemoveEventListener turns this into DIY, a compromise, and lets beginners think Dom's 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 above JS in AddEventListener and RemoveEventListener in the third parameter is true, compared to false effect, you can understand the flow of events.

Event

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

How an event handler is added

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

The event handlers are specified in the following ways:

HTML attribute specified.

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

<button id= "BTN" onclick= "Alert (' button click ')" >button</button>

DOM0 level. an event handler attribute that assigns a function to an element: this is the traditional way to use JS to specify the event physiology program, which is still being used today.

var btn = document.getElementById ("btn");
Btn.onmouseover = function () {
 this.innerhtml= "button";
};

DOM2 level.

Events that manage elements through AddEventListener and RemoveEventListener. All DOM nodes contain the two methods, all of which contain three parameters, with add as an example:

AddEventListener (event name, event handler function, whether an event handler is executed when the event is captured)

var btn = document.getElementById ("btn");
Btn.addeventlistener ("click", Function () {alert (this.id);},true);
Note the following remove, which is completely useless, and these two anonymous functions are actually different objects
Btn.removeeventlistener ("click", Function () {alert (this.id);},true);

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

Event Object

When an event on the DOM is triggered, an event object is generated. Whatever event handler is specified is passed in to the event object: To be exact, the event object is created in the execution context of the call execution function, and it is known how it was passed in, according to the definition of the scope chain.

var btn = document.getElementById ("btn");
var Btnclick = function () {
 alert (event.type);
}
Btn.onclick = btnclick;//When clicking btn button, eject Msg:click

The event contains rich members to control access events, and the following is a shared member of all events.

Target: The object element that triggers the action of the event directly.
Currenttarget: Equal to this, the element that the event handler is used for.
Eventphase: The stage in the event stream where the event handler is invoked. 1,2,3 three values correspond to the three stages of the event flow respectively.
Type: Event type. Click the event corresponding to String: "click".

Event Type

Event types are grouped into the following categories:

UI events.
The focus event.
Mouse and Wheel events.
Keyboard and text events.
Compound event.
Change events.
HTML5 event.
Device events.
Touch and gesture events.

PS: A detailed description of JavaScript events can refer to the site online tools:

JavaScript event and Feature description encyclopedia:
http://tools.jb51.net/table/javascript_event

More readers interested in JavaScript-related content can view the site topics: "JavaScript window operations and tips summary", "javascript json operation tips Summary", "JavaScript switching effects and techniques summary", " JavaScript Search Algorithm Skills Summary, "JavaScript animation effects and techniques Summary", "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and skills summary" and The summary of JavaScript mathematical operational usage

I hope this article will help you with JavaScript programming.