Event 对象
最后更新于：2022-04-02 03:26:17
[TOC]
## Event 对象
### 概述
```
event = new Event(type, options);
```
options 参数
* `bubbles`：布尔值，可选，默认为`false`，表示事件对象是否冒泡。
* `cancelable`：布尔值，可选，默认为`false`，表示事件是否可以被取消，即能否用`Event.preventDefault()`取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。
### 实例属性
#### Event.bubbles 是否会冒泡
#### Event.eventPhase 事件所处状态,返回整数
* 0，事件目前没有发生。
* 1，事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。
* 2，事件到达目标节点，即`Event.target`属性指向的那个节点。
* 3，事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。
#### Event.cancelable 事件是否可取消,只读
#### Event.cancelBubble 是否阻止 可读写
`Event.cancelBubble`属性是一个布尔值，如果设为`true`，相当于执行`Event.stopPropagation()`，可以阻止事件的传播。
#### Event.defaultPrevented 是否调用过`Event.preventDefault` 方法
#### Event.currentTarget，Event.target
`Event.currentTarget`属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。
`Event.target`属性返回原始触发事件的那个节点，即事件最初发生的节点。
事件传播(捕获,冒泡)中 `Event.target``总是不变的，`Event.currentTarget`则是指向监听函数所在的那个节点对象
#### Event.type 事件类型
```
var evt = new Event('foo');
evt.type // "foo
```
#### Event.timeStamp 事件发生时间
```
var evt = new Event('foo');
evt.timeStamp // 3683.6999999995896
```
它是相对于网页加载成功开始计算的
#### Event.isTrusted 布尔值 是否是用户真实行为
#### Event.detail 用户的点击次数
每次点击返回加1
设置三击触发
```
//
';
Hello
function giveDetails(e) { if (e.detail===3) { console.log("触发三级事件"); } } document.querySelector('p').onclick = giveDetails; ``` 对于鼠标滚轮事件，`Event.detail`是滚轮正向滚动的距离，负值就是负向滚动的距离，返回值总是3 ### 实例方法 #### Event.preventDefault() 取消浏览器对当前事件的默认行为 ,不会阻止事件的传播,事件对象的`cancelable`属性为`true`，如果为`false`，调用该方法没有任何效果 #### event.stopPropagation() 事件的代理 阻止冒泡,或捕获` ``` // 事件传播到 p 元素后，就不再向下传播了 阻住捕获 p.addEventListener('click', function (event) { event.stopPropagation(); }, true); // 事件冒泡到 p 元素后，就不再向上冒泡了 p.addEventListener('click', function (event) { event.stopPropagation(); }, false); ``` `stopPropagation`只会阻止事件的传播,不会取消事件 ``` p.addEventListener('click', function (event) { event.stopPropagation(); console.log(1); }); p.addEventListener('click', function(event) { // 会触发 console.log(2); }); //output: //1 //2 ``` #### event.stopImmediatePropagation() 彻底取消这个事件,其他同事件不会触发 ``` p.addEventListener('click', function (event) { event.stopImmediatePropagation(); console.log(1); }); p.addEventListener('click', function(event) { // 不会被触发 console.log(2); }); ``` #### Event.composedPath() 冒泡经过的所有上层节点 ``` var div = document.querySelector('div'); var p = document.querySelector('p'); div.addEventListener('click', function (e) { console.log(e.composedPath()); }, false); // [p, div, body, html, document, Window] ```