addEventListener()和attachEvent()

来源：互联网发布：app抢票软件编辑：程序博客网时间：2024/06/06 02:46

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

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

阅读全文

0 0