(要注意的是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);
