(要注意的是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 的進化:
DOM 0 Event |
DOM 2 Event |
onblur() |
blur |
onfocus() |
focus |
onchange() |
change |
onmouseover() |
mouseover |
onmouseout() |
mouseout |
onmousemove() |
mousemove |
onmousedown() |
mousedown |
onmouseup() |
mouseup |
onclick() |
click |
ondblclick() |
dblclick |
onkeydown() |
keydown |
onkeyup() |
keyup |
onkeypress() |
keypress |
onsubmit() |
submit |
onload() |
load |
onunload() |
unload |
新的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);