javaScript事件（二）事件處理程序

一、事件

二、事件流

以上內容見：javaScript事件（一）事件流

三、事件處理程序

前面提到，事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。響應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。

為事件指定事件處理程序的方法主要有3種。

1、html事件處理程序

事件直接加在html元素上。

首先，這種方法已經過時了。因為動作(javascript代碼)和內容(html代碼)緊密耦合，修改時即要修改html也要修改js。但是寫個小demo的時候還是可以使用的。

這種方式也有兩種方法，都很簡單：

第一種：直接在html中定義事件處理程序及包含的動作。

<input type="button" value="click me!" onclick="alert('clicked!')"/>

第二種：html中定義事件處理程序，執行的動作則調用其他地方定義的腳本。

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
    alert("clicked!");
}
</script>

note:

1）通過event變量可以直接訪問事件本身，比如onclick="alert(event.type)"會彈出click事件。

2）this值等於事件的目標元素，這里目標元素是input。比如 onclick="alert(this.value)"可以得到input元素的value值。

2、DOM0級事件處理程序

把一個函數賦值給一個事件處理程序屬性。

這種方法簡單而且跨瀏覽器，但是只能為一個元素添加一個事件處理函數。

因為這種方法為元素添加多個事件處理函數，則后面的會覆蓋前面的。

添加事件處理程序：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }
</script>

分析：

/*
第一步：myBtn=document.getElementById("myBtn");取得btn對象
第二步：myBtn.onclick其實相當於給myBtn添加了一個onclick的屬性。
第三步：myBtn.onclick=function(){
    alert("clicked!");
}
把函數賦值給onclick事件處理程序屬性。
*/

刪除事件處理程序：

    myBtn.onclick=null;

3、DOM2級事件處理程序

DOM2級事件處理程序可以為一個元素添加多個事件處理程序。其定義了兩個方法用於添加和刪除事件處理程序：addEventListener()和removeEventListener()。

所有的DOM節點都包含這2個方法。

這兩個方法都需要3個參數：事件名，事件處理函數，布爾值。

這個布爾值為true,在捕獲階段處理事件，為false，在冒泡階段處理事件，默認為false。

添加事件處理程序：現在為按鈕添加兩個事件處理函數，一個彈出“hello”,一個彈出“world”。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);
</script>

刪除事件處理程序：通過addEventListener添加的事件處理程序必須通過removeEventListener刪除，且參數一致。

note:通過addEventListener添加的匿名函數將無法刪除。下面這段代碼將不起作用！

    myBtn.removeEventListener("click",function(){
        alert("world");
    },false);

看似該removeEventListener與上面的addEventListener參數一致，實則第二個參數中匿名函數是完全不同的。

所以為了能刪除事件處理程序，代碼可以這樣寫：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);
</script>

四、IE事件處理程序

1、實際應用場景

IE8及以下瀏覽器不支持addEventListener，在實際開發中如果要兼容到IE8及以下瀏覽器。如果用原生的綁定事件，需要做兼容處理，可利用jquery的bind代替。

2、IE8事件綁定

IE8及以下版本瀏覽器實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。

這兩個方法都需要兩個參數：事件處理程序名稱和事件處理程序函數。由於IE8及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。注意是事件處理程序名稱而不是事件名稱，所以要加上on，是onclick而不是click。

note:

IE11只支持addEventListener！

IE9，IE10對attachEvent和addEventListener都支持！

TE8及以下版本只支持attachEvent！

可以拿下面代碼在IE各個版本瀏覽器中進行測試。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handlerIE=function(){
        alert("helloIE");
    }
    var handlerDOM= function () {
        alert("helloDOM");
    }
    myBtn.addEventListener("click",handlerDOM,false);
    myBtn.attachEvent("onclick",handlerIE);
</script>

添加事件處理程序：現在為按鈕添加兩個事件處理函數，一個彈出“hello”,一個彈出“world”。

<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert("hello");
    });
    myBtn.attachEvent("onclick",function(){
        alert("world");
    });
</script>

note:這里運行效果值得注意一下：

IE8以下瀏覽器中先彈出“world”，再彈出“hello”。和DOM中事件觸發順序相反。

IE9及以上瀏覽器先彈出“hello”，再彈出“world”。和DOM中事件觸發順序相同了。

可見IE瀏覽器慢慢也走上正軌了。。。

刪除事件處理程序:通過attachEvent添加的事件處理程序必須通過detachEvent方法刪除，且參數一致。

和DOM事件一樣，添加的匿名函數將無法刪除。

所以為了能刪除事件處理程序，代碼可以這樣寫：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler= function () {
        alert("hello");
    }
    myBtn.attachEvent("onclick",handler);
    myBtn.detachEvent("onclick",handler);
</script>

note:IE事件處理程序中還有一個地方需要注意：作用域。

使用attachEvent()方法，事件處理程序會在全局作用域中運行，因此this等於window。

而dom2或dom0級的方法作用域都是在元素內部，this值為目標元素。

下面例子會彈出true。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert(this===window);
    });
</script>

在編寫跨瀏覽器的代碼時，需牢記這點。

IE7\8檢測：

 //判斷IE7\8 兼容性檢測
            var isIE=!!window.ActiveXObject;
            var isIE6=isIE&&!window.XMLHttpRequest;
            var isIE8=isIE&&!!document.documentMode;
            var isIE7=isIE&&!isIE6&&!isIE8;
             
            if(isIE8 || isIE7){
                li.attachEvent("onclick",function(){
                    _marker.openInfoWindow(_iw);
                })    
            }else{
                li.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
            }

擴展閱讀

五、事件對象

這部分內容見javaScript事件（三）事件對象

六、事件對象的公共成員

這部分內容見javaScript事件（四）event的公共成員（屬性和方法）

七、鼠標事件

這部分內容見javaScript事件（五）事件類型之鼠標事件

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4066381.html有問題歡迎與我討論，共同進步。