[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] ```