Web Event接口

一、定義：Event接口表示在DOM中發生的任何事情；一些是用戶生成的（如用戶點擊鼠標，按下鍵盤等，都會生成一個事件），一些是由其它API生成的（如動畫結束事件，過渡結束，視頻播放被暫停等...）。事件通過由外部源觸發，也可由編程方式觸發，例如ele.click(),觸發一個單擊事件，或者通過定義事件，然後使用eleTarget.dispatch(event)分發一個事件。

二、DOM元素註冊事件處理函數的方法

• 通過事件監聽器addEventListener

myButton.addEventListener('click', function(){alert('Hello world');}, false);

• html的屬性 on[事件名]

<button onclick="alert('Hello world!')">

• DOM元素的屬性

myButton.onclick = function(event){alert('Hello world');};

三、Event對象常用屬性

• event.bubbles  返回一個布爾值，表明前事件是否會向DOM樹上層元素冒泡.
• event.cancelable 返回一個布爾值，表明該事件是否可以被取消默認行爲, 如果該事件可以用 preventDefault() 可以阻止與事件關聯的默認行爲，則返回 true，否則爲 false
• event.currentTarget  返回當事件沿着 DOM 觸發時事件的當前目標，它總是指向事件綁定的元素
• event.target  返回事件觸發的元素
• event.timestamp  返回事件發生的時間戳
• event.type  返回一個字符串，表示當前事件的類型
• event.eventPhase  返回一個整數值，代表當前執行階段。【0】、這個時間段，沒有事件被處理。【1】、事件正在被目標元素的祖先對象在處理，這個處理過程從Window開始，然後Document, 然後是HTMLHtmlElement, 一直這樣，直到目標元素的父元素。 通過EventTarget.addEventListener() 註冊爲捕獲模式的Event Listener 被調用。【2】、事件對象已抵達event.target目標對象，爲這個階段註冊的事件監聽被調用， 如果 Event.bubbles 的值爲false, 對事件對象的處理在這個階段後就會結束。【3】、事件對象逆向向上傳播回目標元素的祖先元素, 從父親元素開始，並且最終到達包含元素 Window，這就是冒泡，並且只有Event.bubbles值爲true的時候纔會發生。 爲這個階段註冊的Event listeners在這個過程中被觸發。

四、編程式觸發事件以MouseEvent爲例

var btn = document.createElement('button')
var event = new MouseEvent('click',{
    bubbles:true,
    cancelable:true
})
btn.dispatchEvent(event)
btn.addEventListener('click',function(){})