Note points for the JavaScript event 'event object'

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

Event objects in DOM

An ES8en-compliant browser passes an event object into the event handler. The event object contains properties and methods related to the specific event that created it. If the division has a different type of event, the available attribute methods have a different type. However, all events will have the members listed in the following table.

The attributes defined by the level 2 DOM event standard are listed below:

bubbles: Returns a Boolean value indicating whether the event is of the bubbly event type. cancelable: Returns a Boolean value indicating whether the event has a default action that can be cancelled. 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 of 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 methods defined by the level 2 DOM event standard are listed below. IE's event model 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 distribution events.

this, target, currentTarget

Inside the event handler, the object this is always equal to the value of currentTarget, while target contains only the actual target of the event. If the event handler is specified 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
}

Since the TARGET of the click event is the btn button, these three values are equal. These values are different if the event handler is in the parent node of the button (document.body). 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 No event handler is registered, so the click The event bubbled up 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. Since the button does not register the event handler, the result is that the click event bubbles to document.body, where the event can be processed.

type

You can use the type attribute when you need to handle more than one event through one function. Such as:

// To get the button 
var btn = document.querySelector("#btn");
// Set multiple events 
var handler = function() {
// Detect the type of event 
 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 a value to the event of the response 
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
preventDefault()

To prevent the default behavior of a particular event, you can use this method. 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 blocks the entire a tag hyperlink function on the web page. Note that preventDefault() can only be used to cancel the default behavior if the cancelable attribute is set to true.

stopPropagation()

Immediately stop the propagation of the event at the DOM level, that is, cancel the one-step event capture or bubble. For example, an event handler added directly to a button can call this method to avoid triggering an event handler registered on 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 on the 1 The following results: 
//btn clicked
//clicked

Such as:

var btn = document.getElementById("btn");
btn.onclick = function () {
 console.log("btn clicked");
 event.stopPropagation();
};
window.onclick = function () {
 console.log("clicked");
};
// Click on the 1 The following results: 
//btn clicked

eventPhase

This property is used to determine which stage of the event flow the event is currently in.

1. If it is the capture stage, it is equal to 1;
2. If it is the target object stage, it is equal to 2;
3. If it is the bubbling stage, it 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);
} // The target object phase, in fact, belongs to the bubbling phase (in btn On) 

document.body.onclick = function() {
 console.log("body" + event.eventPhase);
} // Bubbling stage (at body On) 

Such as:

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 as follows:

document.body capture stage -- > btn target object phase -- > document.body bubbling stage

Above is the entire content of this article, I hope to help you with your study.