[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 设置三击触发 ``` // <p>Hello</p> 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] ```