摘自:
http://www.douban.com/note/235086917/http://jackleechina.iteye.com/blog/1595397為什么一般要采用事件監聽而不是直接對元素的事件屬性（如：onclick、onmouseover）賦值？
原來用事件屬性只能賦值一種方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
這樣后面的賦值語句就將前面的onclick屬性覆蓋了而使用添加事件監聽的方式就可以實現并行。特別是當團隊合作時，事件并行的需求增多，比如：監聽document對象的鼠標事件或者window對象的載入事件等。使用事件屬性則很容易造成事件覆蓋掉
使用事件監聽有兩種方式：attachEvent和addEventListener
attachEvent與addEventListener區別
適應的瀏覽器版本不同，同時在使用的過程中要注意
attachEvent方法 按鈕onclick
addEventListener方法 按鈕click
attachEvent方法， （ie系列）
addEventListener方法 Mozilla系列
例子如下:
1
<!DOCTYPE html>
2<html>
3
4
<SCRIPT LANGUAGE="JavaScript">
5
function method1(){
6
alert("method1");
7
}
8function method2(){
9 alert("method2");
10}
11function method3(){
12 alert("method3");
13
}
14</SCRIPT>
15<body>
16<input type="button" value="dom 元素事件屬性綁定的按鈕" id="button1"/>
17<input type="button" value="IE瀏覽器: attachEvent進行事件綁定的按鈕" id="btn1"/>
18<input type="button" value="火狐瀏覽器: addEventListener進行事件綁定的按鈕" id="btn2"/>
19
20<SCRIPT LANGUAGE="JavaScript">
21 /**//**方法一: 使用元素的事件屬性. [這種方式事件只可綁定一次,最后綁定的執行]**/
22 button1.onclick = function() { alert("1-1"); };
23 button1.onclick = function() { alert("1-2"); };
24 /**//**方法二: 使用attachEvent注冊事件. 格式如下object.attachEvent(event,function);**/
25 var btn1Obj = document.getElementById("btn1");
26 btn1Obj.attachEvent("onclick", method1);
27 btn1Obj.attachEvent("onclick", method2);
28 btn1Obj.attachEvent("onclick", method3);
29 /**//**方法三: addEventListener. 格式如下element.addEventListener(type,listener,useCapture);**/
30 var btn2Obj = document.getElementById("btn2");
31 btn2Obj.addEventListener("click",method1,false);
32 btn2Obj.addEventListener("click",method2,false);
33 btn2Obj.addEventListener("click",method3,false);
34 //執行順序為method1->method2->method3
35</SCRIPT>
36<br/>attachEvent按照注冊倒敘執行: 執行順序為method3->method2->method1
37<br/>addEventListener按照注冊順序執行: 執行順序為method1->method2->method3
38</body>
39</html> 相關衍生閱讀: