addEventListener()和attachEvent()

最新推荐文章于 2022-02-06 19:33:03 发布

优雅1217

最新推荐文章于 2022-02-06 19:33:03 发布

阅读量1.5k

点赞数 1

分类专栏： javascript 前端文章标签：函数 Listener 事件处理程序

本文链接：https://blog.csdn.net/baidu_36065997/article/details/78746406

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

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

<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;
}