HTML DOM 事件

HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。

事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。

提示： 在 W3C 2 級 DOM 事件中規范了事件模型。

HTML DOM 事件

DOM： 指明使用的 DOM 屬性級別。

鼠標事件

鍵盤事件

框架/對象（Frame/Object）事件

表單事件

剪貼板事件

打印事件

拖動事件

多媒體（Media）事件

動畫事件

過渡事件

其他事件

事件對象

常量

屬性

方法

目標事件對象

方法

事件監聽對象

方法

文檔事件對象

方法

鼠標/鍵盤事件對象

屬性

方法

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

S事件類型可以分為三種：

鼠標事件，由某個鼠標動作引發。常用的有click、mouseover、mouseout、mousedown、mouseup、dbclick、mousemove等；

鍵盤事件，由某個鍵盤動作引發。常用的有keydown、keypress、keyup；

接口事件，由用戶行為的結果引起的事件，而非由用戶行為直接引起的；如按下表單的submit按鈕，會引起submit事件，由用戶點擊a鏈接時會要開新頁面并釋放當前頁，些時會引起unload事件等，常用的有blur、focus、change、contextmenu、load、unload、readystatechange、reset、submit、resize、scroll等。

一旦我們決定使用何種事件來完成交互時所需要做的事情時，就需要注冊事件處理程序，事件注冊方式有兩種模型：

傳統模型

行內作為屬性。即直接在HTML元素通過添加屬性形式來注冊，優點是所有瀏覽器都兼容，缺點是維護難，違背了結構與行為相分離的WEB標準原則，所以不提倡，代碼像這樣：

<a href="index.html">do</a>

<p>test</p>

值得注意的是大小寫的問題，由于HTML對大小寫不敏感，所以在過去編寫這些事件時按慣例采用的駝峰格式像這樣onClick、onMouseOver，但是值得注意的是作為元素的屬性寫在HTML里這樣沒有問題，但是如果是在在js環境里這樣是不行的，因為js對大小敏感。

結構與行為分離

結構與行為分離的方式是遵循了WEB標準，要想分離必須設置關聯鉤子，像這樣：

<a href="index.html" id="link">do</a>

<p id="test">test</p>

<script>

var link = document.getElementById('link'),

test = document.getElementById('test');

link.onclick = doThis;

test.onclick = doThat;

function doThis(){...}

function doThat(){...}

</script>

需要注意的是這里的函數名后面沒有加()，加了表示立即執行，有時候我們想在頁面加載完就立即執行一次那就需要加()。還有就是大小寫的問題，之前也提到過了，這里的事件名字要小寫像這樣onclick，否則無法識別。當然還支持另一種形式即匿名函數，像這樣：

var link = document.getElementById('link'),

test = document.getElementById('test');

link.onclick = function(){...};

test.onclick = function(){...};

雖然我們大部分時候都是用的這種傳統方式，而且也不會發生什么錯誤，但它還是有它的缺點，那就是覆蓋問題，按照代碼從上往下的執行順序，如果一個對象注冊了相同的幾個事件，那么最后的一個會把前面定義的事件全部覆蓋，建議在項目完全由我們自己掌控的情況下可以使用些方法，無兼容性，且簡單直觀。如需要解決覆蓋問題請看下面的高級事件注冊模型。

高級模型

此模型主要用來有效解決覆蓋問題，但是它有一個兼容性問題，即IE瀏覽器與其它WEB標準瀏覽器的事件注冊方法不一樣，幸運的是，解決這個兼容性問題并不難，我們先看看W3C(WEB標準瀏覽器陣容支持)和微軟(IE系列陣容支持)所支持的高級事件處理程序方法：

obj.addEventListener('click', doThis, false); //添加

obj.removeEventListener('click', doThis, false); //移除

//Microsoft

obj.attachEvent('onclick', doThis); //添加

obj.detachEvent('onclick', doThis); //移除

上面的代碼我們可以看出，W3C提供的addEventListener和removeEventListener方法有三個參數：

第一個是事件名稱，它是字符串類型的；

第二個是事件發生后要執行的函數，通常我們是不需要立即執行的，所以不帶()；

第三個參數接收的是一個布爾值，指定事件傳遞的方式，false表示冒泡，true表示事件捕獲。

Microsoft提供的attachEvent和detachEvent方法有兩個參數：

第一參數是事件名稱，它是字符串類型的，但和W3C不同的是微軟它的事件名稱需要加上on，和普通模型一樣的；

第二參數是事件發生后要執行的函數，和W3C一樣

我們可以寫個兩個通用函數來解決兼容性問題，像這樣：

注冊事件

addEventSimple(obj, evt, fn, bool){

//對象檢測，通常都是將W3C制定的方法判斷在前面，因為那些暫時不支持的瀏覽器或許哪一天就跟隨標準了，放在前面這也是提升性能的小技巧

if(obj.addEventListener){

bool = bool || false;

obj.addEventListener(evt, fn, bool);

}else if(obj.attachEvent){

obj.attachEvent('on'+evt, fn);

}

}

//移移注冊事件

removeEventSimple(obj, evt, fn, bool){

if(obj.removeEventListener){

bool = bool || false;

obj.removeEventListener(evt, fn, bool);

}else if(obj.detachEvent){

obj.detachEvent('on'+evt, fn);

}

}

addEventSimple接受四個參數，其中前三個是必須的，第四個是可選的

obj指定注冊事件的對象，數據類型為Object；

evt指定事件名稱，數據類型為String；

fn指定事件發生后要執行的函數；

bool指定事件傳遞的類型，數據類型為Boolean；

接下來我們就可以這樣使用了：

<a href="index.html" id="link">do</a>

<p id="test">test</p>

<script>

var link = document.getElementById('link'),

test = document.getElementById('test');

addEventSimple(link, 'click', doThis);

addEventSimple(link, 'click', doThat);

addEventSimple(test, 'click', doThis);

addEventSimple(test, 'click', doThat);

function doThis(){...}

function doThat(){...}

</script>

這樣就不會覆蓋了，雖然事件注冊高級模型，看似很牛B，但也有它的缺點，除了剛才所說的兼容性問題，還有一個就是它無法移除對象上同一個注冊事件綁定的所有執行函數。如果需要移除就必須要知道對象事件注冊綁定的執行函數名稱如上面的doThis、doThat。而傳統模型是可能的：obj.onclick = null。

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com