Understanding JavaScript event objects_javascript tips

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

Event object in DOM

DOM-compatible browsers will pass an event object into the event handler. The event object contains properties and methods related to the specific event that created it. The event types of division are different, and the available attribute methods are different. However, all events will have members listed in the table below.

The properties defined by the Level 2 DOM event standard are listed below:

• bubbles: Returns a Boolean value indicating whether the event is a bubble event type.
  
• cancelable: Returns a Boolean value indicating whether the event can have a cancelable default action.
  
• currentTarget: Returns the element whose event listener triggered this event.
  
• eventPhase: Returns the current phase 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.
  

Listed below are the methods defined by the Level 2 DOM event standard. IE's event model does not support these methods:

• initEvent(): Initialize the properties of the newly created Event object.
• preventDefault(): Informs the browser not to perform the default action associated with the event.
• stopPropagation(): No longer dispatch events.

this, target, currentTarget

Inside the event handler, the object this is always equal to the value of currentTarget, while 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 values. 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. If the event handler is in the button's parent node (document.body), then these 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 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body
}

Here, this and currentTarget are both document.body, because the event handler is registered to 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 have an event handler registered, the click event bubbles up to document.body, where the event can be handled.

1. type

When you need to handle multiple events through a function, you can use the type attribute. Such as:

//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
  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;
  }
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

2. preventDefault()

To prevent the default behavior for a specific 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 all a tag hyperlink functions on the web page. It should be noted that only events with the cancelable attribute set to true can use preventDefault() to cancel their default behavior.

3. stopPropagation()

Immediately stop the propagation of events in the DOM hierarchy, that is, cancel further event capturing or bubbling. For example, an event handler added directly to a button can call this method to avoid triggering the 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");
};
//单击一下的结果：
//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");
};
//单击一下的结果：
//btn clicked

eventPhase

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

• If it is the capture phase, it is equal to 1;
  
• If it is the target object stage, it is equal to 2;
  
• If it is the bubbling stage, it is equal to 3;
  

For example:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段

btn.onclick = function() {
  console.log("btn" + event.eventPhase);
} //目标对象阶段，实际上属于冒泡阶段（在btn上）

document.body.onclick = function() {
  console.log("body" + event.eventPhase);
} //冒泡阶段（在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 roughly:

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

The above is about JavaScript event objects, I hope it will be helpful to everyone’s learning.