事件

事件

　　光有 DOM 是沒法進行交互的，還得有「事件」。事件，就是文檔或瀏覽器窗口中發生的一些特定交互瞬間，JS 與 HTML 之間的交互正是經過事件實現的。事件的概念起源於 IE3 和 Navigator 2 ，當時的事件只是做爲分擔服務器運算負載的一種工具。說到事件不得不提起的一個概念就是事件流，事件流描述的是從頁面中接收事件的順序，然而，該死的有兩種截然相反的事件流，一個是 IE 事件流（事件冒泡流），另外一個是 Netscape 事件流（事件捕獲流）。IE 事件流也稱爲事件冒泡，事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐層向上傳播直到 document （有些版本的瀏覽器還會冒泡到 window） 。事件捕獲則徹底相反，最具體的節點在最後才能捕獲到事件，它的用意在於在事件到達預約目標以前捕獲它。然而，DOM 2 對事件流作了一個規定：事件流包括3個階段，事件捕獲階段、目標階段和事件冒泡階段。首先發生的是事件捕獲，爲截獲事件提供了機會；而後是目標階段，目標節點接收到事件；最後一個是冒泡階段，能夠在此階段對事件做出響應。

　　介紹完兩個基本概念到主角上場了 —— 事件處理程序。聽上去貌似挺高大上，通俗的說，事件就是用戶或瀏覽器自身執行的某些動做，好比說鼠標點擊，滑動等。而事件處理程序就是響應某個事件的函數（也稱爲事件偵聽器）。事件處理程序分爲如下幾種：

① HTML 事件處理程序

經過 HTML 的特性來實現的，舉個直白的例子就是直接在 HTML 標籤上綁定監聽，這種方式的耦合度過高了，也不多會使用，因此就忽略吧~~

② DOM 0 事件處理程序

將一個函數賦值給一個事件處理程序屬性，事件處理程序屬性也就是以 ‘on’開頭的那些事件名，好比 onclick 等等。

var btn = document.getElementById("myBtn")
btn.onclick = function(){
alert(this.id)
}

這裏須要注意的是方法裏面的 this 指向的是對應的 DOM 元素。

③ DOM 2 事件處理程序

DOM 2 定義了兩個方法，用於處理指定和刪除事件處理程序的操做： addEventListener( ) 和 removeEventListener( ) 。全部 DOM 節點中都包含這兩個方法，而且它們都接受 3 個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是 true ，表示在捕獲階段調用事件處理程序；若是是 false ，表示在冒泡階段調用事件處理程序。

const test = document.getElementById('test')
        test.addEventListener('click',function () {
        console.log(this.id) // test
})

一樣的，方法裏面的 this 也是DOM 元素。與 DOM 0 不一樣的是，這種方式能夠綁定多個同類型的事件監聽函數，如：

const test = document.getElementById('test')
test.onclick = function () {
    console.log('1')
}
test.onclick = function () {
    console.log('2')
}
test.addEventListener('click',function () {
    console.log('3')
})
test.addEventListener('click',function () {
    console.log('4')
})

輸出的結果是：2  3  4  ，而 1 沒有被輸出是由於被後面的方法覆蓋了。

④ IE 事件處理程序

IE 實現了與 DOM 2 中相似的兩個方法： attachEvent() 和 detachEvent() 。這兩個方法接受相同的兩個參數：事件處理程序名稱與事件處理程序函數。因爲 IE8 及更早版本只支持事件冒泡，因此經過attachEvent() 添加的事件處理程序都會被添加到冒泡階段。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert("Clicked");
})

須要注意的是，方法裏面的 this 指向的是 window ，因此也能夠經過這點來實現跨瀏覽器版本的特殊需求。

　　其實這些監聽函數都有一個默認參數 event ，也就是事件對象。在觸發 DOM 上的某個事件時，會產生一個事件對象 event ，這個對象中包含着全部與事件有關的信息。好比常見的 event.type 就是指被觸發的事件類型，event.target 就是指事件的目標。IE 中的事件對象則是 window上的一個屬性，window.event 。