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

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

1、事件

2、事件流

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

3、事件處理程序

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

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

一、html事件處理程序

首先，這種方法已通過時了。由於動做(javascript代碼)和內容(html代碼)緊密耦合。可是寫個小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值。

二、DOM0級事件處理程序

這種方法簡單並且跨瀏覽器，可是隻能爲一個元素添加一個事件處理函數。

由於這種方法爲元素添加多個事件處理函數，則後面的會覆蓋前面的。

添加事件處理程序：

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

刪除事件處理程序：

    myBtn.onclick=null;

三、DOM2級事件處理程序

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

這兩個方法都須要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>

4、IE事件處理程序

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

這兩個方法都須要兩個參數：事件處理程序名稱和事件處理程序函數。

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>

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

5、事件對象

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

6、事件對象的公共成員

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

7、鼠標事件

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