浏览器事件监听

摘自: 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" >
 5function 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 >

相关衍生阅读:

JavaScript欲速则不达——基本处理事件详解和阻止事件传播