Event 对象，你很了解吗？

Event 对象是事件发生后产生的事件对象，作为监控函数的参数。它是浏览器本地支持的一个结构函数，所有事件都是这个对象的例子

const event = new Event(type, options) 复制代码 

Event 结构函数接收两个参数。第一个参数是事件的名称，第二个参数是一个配置对象，主要有三个属性

• bubbles：是否冒泡
• cancelable，事件能否取消，即能否取消 preventDefault取消此事件
• composed，是否会在 DOM 在根节点外触发侦听器

上述属性的默认值是 false 下面就通过构造函数我们可以用这种方式创建一个事件 dispatchEvent 触发事件

const event = new Event(   'watch',   {     'bubbles': true,     'cancelable': false   } ) document.dispatchEvent(event) 复制代码 

Event.eventPhase 属性返回整数常量，表示事件现阶段

const phase = event.eventPhase 复制代码 

返回值有 4 个状态

• 0 事件没有发生
• 1 事件处于捕获阶段，
• 2 事件到达目标节点
• 3 事件处于冒泡阶段

Event.cancelable 返回布尔值意味着事件是否可以取消 大多数事件可以取消，但可以使用 Event 默认不能取消构造函数产生的事件

const evt = new Event('foo'); evt.cancelable  // false 复制代码 

值得一提的是，当 cancelable 返回 false 时，使用 event.preventDefault() 没有效果 Event.cancelBubble 也是返回当前是否阻止冒泡，设置为 true 和执行 stopPropagation 一样

事件发生后，将通过捕获和冒泡两个阶段依次通过多个阶段 DOM 节点。

• event.target 触发事件的节点不会随着事件的传播而改变
• event.currentTarget 意味着事件正在通过的节点，即当前监控函数所在的节点，值将发生变化

在事件传播过程中，不同节点的监听函数内部Event.target与Event.currentTarget属性值不同。

返回事件的类型在生成事件时指定，只读属性

const event = new Event('ljc') event.type // 'ljc' 复制代码 

与页面加载成功开始计算的时间戳相比，返回事件的时间戳

const evt = new Event('ljc'); evt.timeStamp // 111.11 复制代码 

返回值的精度取决于浏览器的设置 我们可以用这个属性来计算鼠标移动的速度，每秒移动多少像素

这个属性只有浏览器事件才有，返回一个值。具体与事件类型有关，如

• 点击事件，detail 返回的是鼠标按下的次数(表示单击，2表示双击，3表示三击)
• 滚轮事件，detail 返回是滚轮正向滚动或负向滚动的距离。返回值为 3 的倍数

表示当前事件是否是真实用户行为，例如 click 事件由用户产生，将返回 true Event 构造函数产生的事件将返回 false

防止默认事件 阻止冒泡

Event.stopImmediatePropagation 方法阻止调用同一事件的其他监听函数，无论监控函数是定义在当前节点还是其他节点。换句话说，这种方法可以防止事件的传播 Event.stopPropagation() 更彻底。 对于同一节点同一事件指定了多个监听函数，这些函数将按添加的顺序执行依次调用。只要其中有一个监听函数调用了 Event.stopImmediatePropagation 方法，其他监听函数将不再执行。

function l1(e){   e.stopImmediatePropagation(); }  function l2(e){   console.log('hello world'); }  el.addEventListener('click', l1, false); el.addEventListener('click', l2, false); 复制代码 

上面代码在 el 节点上，为 click 事件增加了两个监听函数 l1 和 l2 。由于 l1 调用了event.stopImmediatePropagation 方法，所以 l2 不会被调用。

回到一个数组，成员是事件的最深层节点和所有依次冒泡的上层节点

<div>  <a></a>  </div>  const div = document.querySelector('div')  div.addEventListener('click', (e) => {  console.log(e.composedPath()) }) // [a, div, body, html, document, window] 复制代码 

click 节点的最深处是 a 上层是节点 window，因此 path 是从 a 到 window

以上是本文的全部内容。我希望它能让你正确 Event 对象有更多的了解！