JavaScript Event "Event object" points of attention _javascript tips

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

Event objects in the DOM

A browser that is compatible with the DOM passes an event object to the event handler. The event object contains the properties and methods associated with the specific event that created it. The event types for division are different, and the available property methods are different. However, all events will have the members listed in the following table.

The following lists the properties defined by the Level 2 DOM event Standard:

• Bubbles: Returns a Boolean value indicating whether the event is a bubbling event type.
• Cancelable: Returns a Boolean value indicating whether the event can hold the default action that can be canceled.
• Currenttarget: Returns the element whose event listener triggered the event.
• Eventphase: Returns the current stage of event propagation.
• Target: Returns the element that triggered this event (the target node for the event).
• TimeStamp: Returns the date and time the event was generated.
• Type: Returns the name of the event represented by the current event object.

The following is a list of methods for the Level 2 DOM event standard definition. The event model for IE does not support these methods:

• Initevent (): Initializes the properties of the newly created Event object.
• Preventdefault (): Notifies the browser not to perform the default action associated with the event.
• Stoppropagation (): No more events will be distributed.

This, target, currenttarget

Within the event handler, object this is always equal to the value of Currenttarget, and target only contains the actual target of the event. If the event handler is assigned directly to the target element, this, currenttarget, and target contain the same value. Such as:

var btn = document.queryselector ("#btn");
Btn.onclick=function () {
 Console.log (Event.currenttarget = = this);//true
 console.log (event.target = = this); True
}

Because the Click event's target is the BTN button, the three values are equal. If the event handler is in the parent node (document.body) of the button, the values are not the same. Such as:

var btn = document.queryselector ("#btn");
Document.body.onclick=function () {
 Console.log (event.currenttarget = = document.body);//true
 Console.log ( this = = = Document.body); True
 console.log (event.target = = btn)//true because BTN does not register an event handler, the Click event bubbles to Document.body
}

Here, this and currenttarget are both document.body, because the event handler is registered on this element. But 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 an event handler, the result click event Bubbles to Document.body, where the event is processed.

Type

You can use the Type property when you need to handle multiple events through a function. Such as:

Get button
var btn = document.queryselector ("#btn");
Set multiple event
var handler = function () {
//Detect 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 the event to the response
Btn.onclick = handler;
Btn.onmouseover = handler;
Btn.onmouseout = handler;
Preventdefault ()

You can use this method to block the default behavior for a specific event. Such as:

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 masks all the A-tag hyperlink functionality on the Web page. Note that only events with the Cancelable property set to True can use Preventdefault () to cancel their default behavior.

Stoppropagation ()

Immediately stops the event propagating in the DOM hierarchy, that is, to cancel further event capture or bubbling. For example, an event handler that is added directly to a button can call the method to avoid triggering an event handler that is registered on the document.body. Such as:

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 property is used to determine which stage of the event flow the event is currently in.

1, if the capture phase is equal to 1;
2, if the target object stage is equal to 2;
3, if the bubble phase is equal to 3;
Such as:

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);
}//target object phase, Actually belongs to the bubbling phase (on btn)

Document.body.onclick = function () {
 console.log ("body" + event.eventphase);
}// Bubbling phase (on 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 phase--> btn target object phase--> document.body bubbling phase

The above is the entire content of this article, I hope to help you learn.