摘自:
http://www.douban.com/note/235086917/http://jackleechina.iteye.com/blog/1595397為什么一般要采用事件監(jiān)聽而不是直接對元素的事件屬性（如：onclick、onmouseover）賦值？
原來用事件屬性只能賦值一種方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
這樣后面的賦值語句就將前面的onclick屬性覆蓋了而使用添加事件監(jiān)聽的方式就可以實(shí)現(xiàn)并行。特別是當(dāng)團(tuán)隊(duì)合作時，事件并行的需求增多，比如：監(jiān)聽document對象的鼠標(biāo)事件或者window對象的載入事件等。使用事件屬性則很容易造成事件覆蓋掉
使用事件監(jiān)聽有兩種方式：attachEvent和addEventListener
attachEvent與addEventListener區(qū)別
適應(yīng)的瀏覽器版本不同，同時在使用的過程中要注意
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進(jìn)行事件綁定的按鈕" id="btn1"/>
18<input type="button" value="火狐瀏覽器: addEventListener進(jìn)行事件綁定的按鈕" id="btn2"/>
19
20<SCRIPT LANGUAGE="JavaScript">
21 /**//**方法一: 使用元素的事件屬性. [這種方式事件只可綁定一次,最后綁定的執(zhí)行]**/
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 //執(zhí)行順序?yàn)閙ethod1->method2->method3
35</SCRIPT>
36<br/>attachEvent按照注冊倒敘執(zhí)行: 執(zhí)行順序?yàn)閙ethod3->method2->method1
37<br/>addEventListener按照注冊順序執(zhí)行: 執(zhí)行順序?yàn)閙ethod1->method2->method3
38</body>
39</html> 相關(guān)衍生閱讀: