前段時間在看《JavaScript高階程式設計》第十三章-事件, 還沒看完, 只是看到裡面的一些內容覺得在這裡做一個記錄和總結會比較好. 首先先來講解一下繫結事件一共有幾種方式以及他們的特點和瀏覽器的相容性

一. DOM0級事件處理程式

所謂的DOM0級事件處理程式, 就是通過JavaScript指定事件處理程式的傳統方式, 就是將一個函式賦值給一個事件處理程式屬性, 比方說div.onclick這樣的on+事件型別的方式, 這種方式至今仍然為所有現代瀏覽器所支援, 原因一是簡單, 二是具有跨瀏覽器的優勢.這種繫結方式很簡單, 比如:

1. var oDiv = document.getElementById("myDiv");
2. oDiv.onclick = function(){
3.     alert(1);
4. }

可以從程式碼看出來這種繫結方式十分的簡單而且通俗易懂, 此外也沒有瀏覽器相容問題.

阻止事件的預設行為: return false;

二. DOM2級事件處理程式

"DOM2級事件"定義了兩個方法, 用於處理指定和刪除事件處理程式的操作:addEventListener()和removeEventListener(). 所有DOM節點都包含這兩種方法, 並且他們都接受3個引數: 要處理的石建明、作為事件處理程式的函式和一個布林值. 最後這個布林值如果是true, 表示在捕獲階段呼叫事件處理程式; 如果是false, 表示在冒泡階段呼叫事件處理程式. 比如:

1. var btn = document.getElementById( 'myBtn' );
2. btn.addEventListener("click", function(){
3.     alert(this.id);
4. }, false);

使用DOM2級方法新增事件處理程式的主要好處是可以新增多個事件處理程式, 而且這些處理程式會按照新增他們的順序觸發.

瀏覽器相容性: IE9、Firefox、Safari、Chrome和Opera支援DOM2級事件處理程式. IE8以及更早的版本不支援該方法.

阻止事件的預設行為: ev.preventDefault();

三.IE事件處理程式

IE實現了與DOM中類似的兩個方法:attachEvent()和detachEvent(), 這兩個方法接受相同的兩個引數: 事件處理程式名稱與事件處理程式函式. 由於IE8及更早版本只支援事件冒泡, 所以通過attachEvent()新增的事件處理程式都會被新增到冒泡階段. 使用方法:

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

注意, attachevent()中的第一個引數是onclick, 而非DOM的addEventListener()方法中的click.

在IE中使用attachEvent()和使用DOM0級方法的主要區別在於事件處理程式的作用域, 在使用DOM0級方法的情況下, 事件處理程式會在所屬元素的作用域內執行; 在使用attachEvent()方法的情況下, 事件處理程式會在全域性作用域中執行, 因此this等於window, 來看下面的例子:

1. var btn = document.getElementById("myBtn");
2. btn.attachEvent("onclick", function(){
3. alert(this === window);         //true
4. });

在編寫跨瀏覽器的程式碼時, 牢記這一區別非常重要.

此外, 與addEventListener類似, attachEvent()方法也可以用來為一個元素新增多個事件處理程式. 不過, 與DOM方法不同的是, 這些事件處理程式不是以新增他們的順序執行, 而是以相反的順序被觸發.

瀏覽器相容性: 支援IE事件處理程式的瀏覽器有IE8及更早版本還有Oper7及更早版本
阻止事件的預設行為: return false;

四. 跨瀏覽器的繫結滑鼠滾輪事件處理程式

接下來我想使用上面所述的幾種繫結事件的方法寫一個跨瀏覽器的滑鼠滾輪事件處理程式:首先先說明一下, 在IE8及更早版本和Chrome中滑鼠滾輪事件是onmousewheel, 且滾動產生的數值是儲存在event.wheelDelta中, 向上滾動是+120, 向下滾動是-120, 而在火狐下支援的滑鼠滾輪事件是DOMMouseScroll, 而且需要使用addEventListener來繫結, 滾動產生的數值儲存在event.detail中, 向上滾動是-3, 向下滾動是+3

1. var oDiv  = document.getElementById( "myDiv" );
2. oDiv.onmousewheel = fn;
3. if( oDiv.addEventListener ){
4.     oDiv.addeventListener( 'DOMMouseScroll' , fn, false );
5. }
6. function fn(){
7.     var b = true;        //向上的話為true, 向下的話為false
8.     if( ev.wheelDelta ){
9.         b = ev.wheelDelta > 0? true : false;
10.     }
11.     else{
12.         b = ev.detail > 0? true : false;
13.     }
14.     if( ev.preventDefault ){
15.         ev.preventDefault()       //阻止火狐下的預設行為
16.     }
17.     return false;       //阻止IE和Chrome下的預設行為
18. }