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>
<!DOCTYPE html>2
<html>3
4
<SCRIPT LANGUAGE="JavaScript">
5
function method1(){
6
alert("method1");7
}8
function method2(){9
alert("method2");10
}11
function 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->method335
</SCRIPT>36
<br/>attachEvent按照注册倒叙执行: 执行顺序为method3->method2->method1 37
<br/>addEventListener按照注册顺序执行: 执行顺序为method1->method2->method3 38
</body>39
</html>相关衍生阅读: