addEventListener 的用法示例介紹

(要注意的是div必須放到js前面才行)

一般情況下，如果給一個dom對象綁定同一個事件，只有最後一個會生效，比如：

複製代碼代碼如下:

document.getElementById("btn").onclick = method1;

document.getElementById("btn").onclick = method2;

document.getElementById("btn").onclick = method3;

那麼將只有method3生效。

如果是Mozilla系列，用addEventListener可以讓多個事件按順序都實現，比如：

複製代碼代碼如下:

var btn1Obj = document.getElementById("btn1");

//element.addEventListener(type,listener,useCapture);

btn1Obj.addEventListener("click",method1,false);

btn1Obj.addEventListener("click",method2,false);

btn1Obj.addEventListener("click",method3,false);

執行順序為method1->method2->method3

如果是ie系列，用attachEvent可以讓多個事件按順序都實現，比如：

複製代碼代碼如下:

var btn1Obj = document.getElementById("btn1");

//object.attachEvent(event,function);

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);

執行順序為method3->method2->method1

=======================================================

Mozilla中：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文檔節點、document、window 或XMLHttpRequest。

type： 字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。

listener ：實現了EventListener 接口或者是JavaScript 中的函數。

useCapture ：是否使用捕捉，一般用false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);

target： 文檔節點、document、window 或XMLHttpRequest。

type： 字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

listener ：實現了EventListener 接口或者是JavaScript 中的函數。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及IE 同時支持移除指定的事件, 用途是移除設定的事件, 格式分別如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的進化:

新的DOM2 用法可以addEventListener()這個函數來觀察到:

複製代碼代碼如下:

addEventListener(event,function,capture/bubble);

參數event如上表所示, function是要執行的函數, capture與bubble分別是W3C制定得兩種時間模式,簡單來說capture就是從document的開始讀到最後一行, 再執行事件, 而bubble則是先尋找指定的位置再執行事件.

capture/bubble的參數是布爾值, True表示用capture, False則是bubble.Windows Internet Explorer也有製定一種EventHandler, 是attachEvent(), 格式如下:

複製代碼代碼如下:

window.attachEvent(”submit”,myFunction());

比較特別的是attachEvent不需要指定capture/bubble的參數, 因為在windows IE環境下都是使用Bubble的模式.

如何判斷是否支持哪種監聽呢？如：

複製代碼代碼如下:

if (typeof window.addEventListener != “undefined”) {

window.addEventListener(”load”,rollover,false);

} else {

window.attachEvent(”onload”,rollover)

}

上述的typeof window.addEventListener != “undefined” 程序代碼可以判斷使用者的瀏覽器是否支持AddEventListener這個事件模型, 如果不支持就使用attachEvent.

W3C 及IE 同時支持移除指定的事件, 用途是移除設定的事件, 格式分別如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);