In-depth analysis of the event object Event in JS

After the event occurs, an event object (Event) will be generated, representing the status of the event. The following article will give you an in-depth understanding of the event object Event in JS and a detailed interpretation of it. I hope it will be helpful to everyone!

1. What is an event object Event

When every event is triggered, a corresponding event object will be generatedevent, which includes the element that triggered the event, the status of the keyboard and mouse, the position, etc.

Whenever the user triggers an event, JS will automatically generate aneventobject. Depending on the triggering event, this object contains different contents. For example, a click event is triggered by the mouse. AMouseEventobject will be generated, which contains the mouse position and other contents; triggering an event through the keyboard will generate aKeyboardEventobject which contains key-related information.

• eventThe object represents the status of the event, such as the element that triggered the event, the status of the keyboard button, the position of the mouse, the status of the mouse button, etc.;
• eventThe object is an implicit parameter and is only valid during the event;
• eventThe object will have different properties depending on the triggering method. That is to say, some properties are only valid for specific events, but all contents are inherited from theEventobject; the

• eventobject is inIEThe behavior of browsers such asChromeis different. For example,event.targetrepresents the element that triggers the event. InIE, you need to useevent.srcElementGet;

EventThe object itself is a constructor that can be used to generate new instances.

event = new Event(type, options);

EventThe constructor accepts two parameters. The first parametertypeis a string, indicating the name of the event; the second parameteroptionsis an object, indicating the configuration of the event object. This object mainly has the following two properties.

• bubbles: Boolean value, optional, defaults to false, indicating whether the event object bubbles.

• cancelable: Boolean value, optional, defaults to false, indicating whether the event can be canceled, that is, whether it can be canceled usingEvent.preventDefault()Cancel this event. Once an event is canceled, it is as if it never occurred and the browser's default behavior for that event will not be triggered.

var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);

The above code creates a newlookevent instance, and then uses thedispatchEventmethod to trigger the event.

Note that if thebubblesattribute is not explicitly specified astrue, the generated event can only trigger the listening function in the "capture phase".

// HTML 代码为 // 
Hello
 var div = document.querySelector('div'); var p = document.querySelector('p'); function callback(event) { var tag = event.currentTarget.tagName; console.log('Tag: ' + tag); // 没有任何输出 } div.addEventListener('click', callback, false); var click = new Event('click'); p.dispatchEvent(click);

In the above code, thepelement emits aclickevent, which does not bubble by default.div.addEventListenerThe method specifies listening during the bubbling phase, so the listening function will not be triggered. If it is written asdiv.addEventListener('click', callback, true), then this event can be monitored during the "capture phase".

On the other hand, if this event fires on a div element.

div.dispatchEvent(click);

Then, no matter whether thedivelement is listening in the bubbling stage or in the capturing stage, the listening function will be triggered. Because thedivelement is the target of the event at this time, there is no question of whether it bubbles up. Thedivelement will always receive the event, thus causing the listening function to take effect.

2. Event attributes

We mentioned earlier that objects will have different attributes depending on the triggering method. We can It is roughly divided into four parts:

General properties(properties owned whether triggered by keyboard or mouse)

• bubbles

  Whether the event will bubble, Boolean;

• cancelable

  Whether the event has default behavior, Boolean Value;Default behavior refers to some behaviors specified in the browser, such as
  The link will jump after clicking on the label,

  Click within the label Enter will automatically submit and so on.

• currentTarget

  The element where the event handler is currently processing the event returns anElementobject;

• defaultPrevented

  Whether the event cancels the default behavior, Boolean value;

• detail

  Returns a number containing event detailsIn theclick
  ,mousedownandmouseupevents, this number represents the current number of clicks. In thedblclickevent, this number is always 2 . In keyboard events and mouse over events, this number is always 0.

• eventPhase返回一个代表事件处理程序发生时所在阶段的数字；
  0表示当前阶段未发生其他事件；1表示当前事件在捕获阶段发生；2表示当前事件处于目标阶段；3表示当前事件处于冒泡阶段；

• isTrusted表示该事件是由用户行为触发的，还是由 JS 代码触发的，布尔值；
    当事件是由用户行为（点击等）触发时，值为true，当事件是通过EventTarget.dispatchEvent()派发的时候，这个属性的值为false。

 
列表1
 
列表2
 
列表3
 
列表4

百度一下，你就知道 

 
不要触发 ul 的点击事件处理程序
 
 

var oBtn = document.querySelector("button"); // 为 button 绑定事件处理程序 oBtn.addEventListener("click", function () { console.log(event); }) var event = document.createEvent("MouseEvents"); // 通过 initMouseEvent() 方法初始化鼠标事件的 event 对象 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); // 通过 dispatchEvent() 方法来触发 oBtn 上绑定的点击事件，此时浏览器打印的 event 对象为自定义的 event oBtn.dispatchEvent(event);

document.onkeydown = function () { console.log(event); } var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown", false, false, document.defaultView, "a", 0, "Shift", 0); document.dispatchEvent(event);

var oInput = document.querySelector("input"); oInput.addEventListener("myEvent", function () { console.log(event); }) var event = document.createEvent("CustomEvent"); event.initCustomEvent("myEvent", true, false, "自定义事件myEvent"); oInput.dispatchEvent(event);