attachEvent 与 addEventListener

最新推荐文章于 2024-04-05 06:42:51 发布

陌阡

最新推荐文章于 2024-04-05 06:42:51 发布

阅读量709

点赞数

分类专栏： javascript 文章标签： mozilla function 浏览器 null

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

JS:attachEvent和addEventListener 使用方法
attachEvent与addEventListener区别
适应的浏览器版本不同，同时在使用的过程中要注意
attachEvent方法          按钮onclick
addEventListener方法    按钮click
两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法用于 Mozilla系列
举例:
Js代码
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样：
Js代码
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);

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

//例子

var EX = {
  addEvent:function(k,v){
    var me = this;
    if (me.addEventListener)
      me.addEventListener(k, v, false);
    else if(me.attachEvent)
      me.attachEvent("on" + k, v);
    else
      me["on" + k] = v;
  },
  removeEvent:function(k,v){
    var me = this;
    if (me.removeEventListener)
      me.removeEventListener(k, v, false);
    else if (me.detachEvent)
      me.detachEvent("on" + k, v);
    else
      me["on" + k] = null;
  },
  stop:function(evt){
    evt = evt || window.event;
    evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
  }
};