Important points of attention for JavaScript events "event objects", javascript events

Important points of attention for JavaScript events "event objects", javascript events

When an event on the DOM is triggered, an event object is generated.

Event object in DOM

A dom-compatible browser will pass an event object to the event handler. The event object contains attributes and methods related to the specific events for which it is created. The Division event types are different, and the available attribute methods are different. However, all events will have members listed in the following table.

The following lists the standard-defined attributes of level 2 DOM events:

• Bubbles: returns a Boolean value indicating whether the event is a bubble event type.
• Cancelable: returns a Boolean value indicating whether the event can hold the default action that can be canceled.
• CurrentTarget: the element whose event listener triggers the event.
• EventPhase: returns the current stage of event propagation.
• Target: returns the element that triggers this event (the target node of the event ).
• TimeStamp: returns the date and time of event generation.
• Type: return the name of the Event represented by the current Event object.

The following describes the standard definition of level 2 DOM events. The event model of IE does not support these methods:

• InitEvent (): initializes the attributes of the newly created Event object.
• PreventDefault (): notifies the browser not to perform the default action associated with the event.
• StopPropagation (): no longer distributes events.

This, target, currentTarget

Within the event handler, the object this is always equal to the value of currentTarget, while the target contains only the actual target of the event. If the event handler is directly assigned to the target element, this, currentTarget, and target contain the same value. For example:

var btn = document.querySelector("#btn");btn.onclick=function () { console.log(event.currentTarget === this); //true console.log(event.target === this); //true}

Because the click event targets btn buttons, these three values are equal. If the event handler is on the parent node (document. body) of the button, these values are different. For example:

Var btn = document. querySelector ("# btn"); document. body. onclick = function () {console. log (event. currentTarget = document. body); // true console. log (this = document. body); // true lele.log(event.tar get = btn); // true because btn does not register an event handler, the click event is bubbling to the document. body}

Here, both this and currentTarget are document. body, because the event handler registers to this element. However, the target element is equal to the button element because it is the real target of the click event. Because the button does not register the event handler, The result click event will bubble to document. body, where the event can be processed.

Type

You can use the type attribute when you need to use a function to process multiple events. For example:

// Obtain the button var btn = document. querySelector ("# btn"); // sets multiple event var handler = function () {// detects the event type switch (event. type) {case "click": console. log ("I click it"); break; case "mouseover": console. log ("I enter it"); break; case "mouseout": console. log ("I leave it"); break ;}// assign btn TO THE RESPONSE event. onclick = handler; btn. onmouseover = handler; btn. onmouseout = handler; preventDefault ()

You can use this method to prevent the default behavior of a specific event. For example:

var aTags = document.getElementsByTagName("a");for (var i = 0; i < aTags.length; i++) { var currentATag = aTags[i]; currentATag.onclick = function() {  event.preventDefault(); }};

The above code shields all the label hyperlinks on the webpage. Note that preventDefault () can be used to cancel the default behavior only for events whose cancelable attribute is set to true.

StopPropagation ()

Stop event propagation at the DOM level immediately, that is, cancel further event capture or bubbling. For example, the event handler that directly adds a button can call this method to avoid triggering the event handler registered on the document. body. For example:

Var btn = document. getElementById ("btn"); btn. onclick = function () {console. log ("btn clicked"); // event. stopPropagation () ;}; window. onclick = function () {console. log ("clicked") ;}; // click the result: // btn clicked // clicked

Another example:

Var btn = document. getElementById ("btn"); btn. onclick = function () {console. log ("btn clicked"); event. stopPropagation () ;}; window. onclick = function () {console. log ("clicked") ;}; // click the result: // btn clicked

EventPhase

This attribute is used to determine the stage of the event stream.

1. If it is a capture phase, it is equal to 1;
2. If the target object stage is 2;
3. If it is a bubble stage, it is equal to 3;
For example:

Var btn = document. getElementById ("btn"); document. body. addEventListener ("click", function () {console. log ("bodyListener" + event. eventPhase) ;}, true) // capture phase btn. onclick = function () {console. log ("btn" + event. eventPhase);} // the target object stage, which actually belongs to the bubble stage (on btn) document. body. onclick = function () {console. log ("body" + event. eventPhase);} // bubble stage (on the body)

Another example:

var btn = document.getElementById("btn");document.body.addEventListener("click", function() { console.log(event.eventPhase); //1 console.log(event.currentTarget); //HTMLBodyElement}, true);btn.addEventListener("click", function() { console.log(event.eventPhase); //2 console.log(event.currentTarget); //HTMLInputElement});document.body.addEventListener("click", function() { console.log(event.eventPhase); //3 console.log(event.currentTarget); //HTMLBodyElement});

The process is probably:

Document. body capture stage --> btn target object stage --> document. body bubble stage

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Js event-triggered object action
• Javascript drag-and-drop series Article 3: Event objects
• Use javascript to obtain the code of the object where the cursor is placed on the page and the event is triggered
• Demonstration of js event object scroll wheel Effect
• Summary of methods for getting event objects in js
• Js achieves Image pre-loading (js operates Image object attribute complete, event onload asynchronously loads images)
• Js mouse click Event writing in various browsers and Event object attribute Introduction
• Js obtains the event source and the object that triggers the event