必威体育Betway必威体育官网
当前位置:首页 > IT技术

addEventListener()和attachEvent()

时间:2019-10-09 16:13:24来源:IT技术作者:seo实验室小编阅读:54次「手机版」
 

attachevent

一般来说一个事件只能有一个事件处理程序与之关联

栗子:

<body>
    <span>测试</span>
</body>
<script>
    var span = document.getElementsByTagName("span")[0];
    span.onclick = function(){
        this.style.color="red";
    }
    span.onclick = function(){
        this.style.backgroundColor = "skyblue";
    }
</script>
运行结果:

这里写图片描述

为一个span引入同一个事件的不同处理程序,运行程序后,发现点击”测试”,只会将背景颜色变成天蓝色,第一个处理程序不起作用,字体的颜色仍然保持为默认颜色,没有变红。

因为事件处理程序只是属性,一个属性只能有一个值,浏览器只会运行所指定的最后一个事件处理程序。

为了解决这个问题,引入 DOM Level 2模型,这个模型提供了一个新的方法addeventlistener(),利用该方法可以为一个事件指定多个事件处理程序。

格式:

   事件源.addEventListener("触发事件",处理程序,false);

修改上述代码,变成:

<body>
    <span>测试</span>
</body>
<script>
    var span = document.getElementsByTagName("span")[0];
    span.addEventListener("click", function(){
        this.style.color="red";
    }, false);
    span.addEventListener("click", function(){
        this.style.backgroundColor = "skyblue";
    },false);
</script>

这里写图片描述

运行程序后点击“测试”,发现背景色变成天蓝色的同时字体也变成红色。

  • 使用addEventListener()可以根据需要为事件指定多个事件处理程序
  • 适用于所有支持DOM Level 2的Web浏览器。
  • 事件监听者不会以某种特定的顺序调用程序

IE不支持addEventListener(),它有自己的事件模型attachevent()

格式:

  事件源.attachEvent("触发事件",处理程序);

封装函数,使其适用于任何浏览器:

function addeventhandler(obj,eventName,handler){
  if(document.attachEvent){
    obj.attachEvent("on"+eventName,handler);
  }else if(document.addEventListener){
    obj.addEventListener(eventName,handler,false);
  }
}

使用DOM Level 2浏览器时(如Firefox、Safari或Opera),发生事件的对象仍是其事件处理程序的所有者,所以会有和DOM Level 0同样的行为。但是在IE中事件处理程序的所有者是IE的事件框架,而不是当前活动的页面对象,即事件处理函数为这个事件框架所有,而不属于HTML页面上通过点击事件或鼠标移动事件激活的一个对象。

框架:完成某个任务的一组对象或代码

在IE中,事件处理程序中的”this”是指事件处理框架中的一个对象,而不是web页面上的一个对象

为解决这个问题,事件处理程序从attachEvent()和addEventListener()得到一个Event对象,Event对象知道哪个对象触发了事件,也知道事件的类型是什么

首先,我们需要在事件处理程序中访问Event对象,从而确定页面上的哪个对象触发了事件处理程序调用。然后,需要列出对应这个Event对象的参数

event

封装触发事件的对象

function getActivatedObject(e){
  var obj;
      if(!e){      #早期的IE实际上不会发送一个e对象
    obj = window.event.srcelement;
  }else if(e.srcElement){  #IE 7 or later
    obj = e.srcElement;
  }else {
    obj = e.target; DOM Level 2 browser
  }
  return obj;
}

相关阅读

addEventListener()和attachEvent()的区别和兼容写法

addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函

.passive 修饰符,addEventListener()参数具体意义

很久以前,addEventListener() 的参数约定是这样的:addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听

attachEvent报错原因

document.attachEvent is not a function出错的原因 报错原因有: (1)、利用attachEvent()直接在谷歌浏览器打开,我就是犯这种低级错

分享到:

栏目导航

推荐阅读

热门阅读