js 中attachEvent与addEventListener使用小结

      用过这两个方法的人都知道，侦听事件在IE和火狐中有所差异需要区别对待。

 

两者区别

　　attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）

　　addEventListener方法         用于 Mozilla系列

 

两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法 用于 Mozilla系列

 

举例:
Js代码

function G(id){return document.getElementById(id);}



G("btn").onclick = method1;  

G("btn").onclick = method2;  

G("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行  

G("btn").onclick = method1;

G("btn").onclick = method2;

G("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行 

 

 

写成这样：
Js代码

var btn1Obj = document.getElementById("btn1"); 

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1 

 

如果是Mozilla系列，并不支持该方法，需要用到

addEventListener var btn1Obj = document.getElementById("btn1");

btn1Obj.addEventListener("click",method1,false);

btn1Obj.addEventListener("click",method2,false);

btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3 

 

 

 /**************************************

***根据ie或火狐选择不同的侦听方式

**************************************/

 function attachEventListen(obj,e,fun){

         obj.attachEvent ? obj.attachEvent("on"+e,fun) : obj.addEventListener(e,fun,false);

      } 

 

其中，addEventListener第三个参数主要是确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果为 false，则侦听器只在目标或冒泡阶段处理事件。