(1) 事件冒泡
瀏覽器
IE 的事件流叫作事件冒泡(event bubbling),即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收,而後逐級向上傳播到較爲不具體的節點(文檔)。
函數
(2) 事件捕獲
this
事件捕獲的思想是不太具體的節點應該更早接收到事件,而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預約目標以前捕獲它。
spa
(3) DOM事件流
對象
「 DOM2級事件」規定的事件流包括三個階段:事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲,爲截獲事件提供了機會。而後是實際的目標接收到事件。最後一個階段是冒泡階段,能夠在這個階段對事件作出響應。
seo
(4) 事件處理程序
事件
事件就是用戶或瀏覽器自身執行的某種動做。諸如 click、 load 和 mouseover,都是事件的名字。而響應某個事件的函數就叫作事件處理程序(或事件偵聽器)。事件處理程序的名字以"on"開頭,所以click 事件的事件處理程序就是 onclick, load 事件的事件處理程序就是 onload。爲事件指定處理程序的方式有好幾種。
ip
(5) DOM0 級事件處理程序
作用域
經過 JavaScript 指定事件處理程序的傳統方式,就是將一個函數賦值給一個事件處理程序屬性。這種爲事件處理程序賦值的方法是在第四代 Web 瀏覽器中出現的,並且至今仍然爲全部現代瀏覽器所支持。緣由一是簡單,二是具備跨瀏覽器的優點。要使用 JavaScript 指定事件處理程序,首先必須取得一個要操做的對象的引用。
rem
將事件處理程序設置爲 null 以後,再單擊按鈕將不會有任何動做發生。
(6) DOM2 級事件處理程序
「 DOM2 級事件」 定義了兩個方法,用於處理指定和刪除事件處理程序的操做: addEventListener()和 removeEventListener()。全部 DOM 節點中都包含這兩個方法,而且它們都接受 3 個參數:要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是 true,表示在捕獲階段調用事件處理程序;若是是 false,表示在冒泡階段調用事件處理程序。
與 DOM0 級方法同樣,這裏添加的事件處理程序也是在其依附的元素的做用域中運行。使用 DOM2 級方法添加事件處理程序的主要好處是能夠添加多個事件處理程序。
大多數狀況下,都是將事件處理程序添加到事件流的冒泡階段,這樣能夠最大限度地兼容各類瀏覽器。最好只在須要在事件到達目標以前截獲它的時候將事件處理程序添加到捕獲階段。若是不是特別須要,咱們不建議在事件捕獲階段註冊事件處理程序。
(7) IE事件處理程序
IE 實現了與 DOM 中相似的兩個方法: attachEvent()和 detachEvent()。這兩個方法接受相同的兩個參數:事件處理程序名稱與事件處理程序函數。因爲 IE8 及更早版本只支持事件冒泡,因此經過attachEvent()添加的事件處理程序都會被添加到冒泡階段。
在 IE 中使用 attachEvent()與使用 DOM0 級方法的主要區別在於事件處理程序的做用域。在使用 DOM0 級方法的狀況下,事件處理程序會在其所屬元素的做用域內運行;在使用 attachEvent()方法的狀況下,事件處理程序會在全局做用域中運行,所以 this 等於 window。
(8) 事件對象
在觸發 DOM 上的某個事件時,會產生一個事件對象 event,這個對象中包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。例如,鼠標操做致使的事件對象中,會包含鼠標位置的信息,而鍵盤操做致使的事件對象中,會包含與按下的鍵有關的信息。全部瀏覽器都支持 event 對象,但支持方式不一樣。