1、this指向问题

使用addEventListener注册的事件,事件处理函数中 this指向目标元素;

使用attachEvent注册的事件,事件处理函数中 this指向window对象

要想将二者统一,可采用下面方法:

function addEvent(ele,evtType,handler){
if(ele.addEventListener){
ele.addEventListener(evtType,handler,false);
}else if(ele.attachEvent){
ele.attachEvent('on'+evtType,function (event){
handler.call(ele,event); //改变事件处理函数中的this指向
});
}
}

  2、调用顺序:

通过对象属性或html属性注册的事件,会优先被调用

addEventListener注册的事件,按照注册顺序执行

attachEvent注册的事件,可能按任何顺序执行 (IE8及之前版本,一般会和注册顺序相反)IE9之后,支持addEventListener

3、事件处理函数返回值

通过对象属性或html属性注册的事件,通过返回false,可以阻止事件的默认行为

addEventListener注册的事件,通过preventDefault()方法阻止

attachEvent注册的事件,通过设置事件对象的returnValue属性为false

统一addEventListener与attachEvent中this指向问题的更多相关文章

  1. attachEvent 中this指向

    IE中使用的事件绑定函数与Web标准的不同,而且this指向也不一样,Web标签中的this指向与传统事件绑定中的this一样,是当前目标,但是IE中事件绑定函数中this指向,通过使用call或ap ...

  2. Javascript中addEventListener和attachEvent的区别

    在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...

  3. addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】

    yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...

  4. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  5. addEventListener和attachEvent的区别(转载)

    attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...

  6. 注册事件处理程序onclick和addEventListener、attachEvent

    一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...

  7. addEventListener()及attachEvent()区别分析

    Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...

  8. addEventListener 与attachEvent

    第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...

  9. JavaScript中this指向的简单理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

随机推荐

  1. Pycharm中如何加载多个项目?

    今天在使用Pycharm工具练习Python时遇到一个疑问:在已存有项目A工程的前提下如何新建另一个项目B,且两者并存? 基本操作步骤: 在File下拉项中选择"New Project&qu ...

  2. Hive任务优化(1)

    一个Hive查询生成多个Map Reduce Job,一个Map Reduce Job又有Map,Reduce,Spill,Shuffle,Sort等多个阶段,所以针对Hive查询的优化可以大致分为针 ...

  3. Nexus 私有仓库搭建与 Maven 集成

    Nexus 私有仓库搭建与 Maven 集成 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和 ...

  4. C++格式化硬盘程序

    #include using namespace std; //声明命名空间 void main() {  char format[12]="format", name[10], ...

  5. 使用Dapper操作Mysql数据库

    首先我想说明一下:相比最原始的ADO.NET,一般都认为封装过一层的ORM性能上会有损耗,但其实在使用中你会发现,当你需要把数据库对象转化为实体模型时,很多所谓的DbHelper其实封装的很低效,反而 ...

  6. IDEA Maven 三层架构 2、运行 springMVC

    运行 SpringMVC 首先要理解 SpringMVC 应用程序的入口是配置文件 web.xml,其路径为"src/main/webapp/WEB-INF/web.xml",通过 ...

  7. Fedora 下 Google-Chrome 经常出现僵尸进程的权宜办法

    对于Chrome_ProcessL 和Chrome_FileThre这两僵尸进程,估计遇到过的人都对其各种无奈吧,放任不管吧,越来越多,然后卡死,只能另开个X环境或者在其他的TTY里干掉他俩再切回去, ...

  8. Java Condition

    在Condition中,用await()替换wait(),用signal()替换notify(),用signalAll()替换notifyAll(),传统线程的通信方式,Condition都可以实现, ...

  9. Spring中的注入方式

    在Spring配置文件中使用XML文件进行配置,实际上是让Spring执行了相应的代码,例如: 使用<bean>元素,实际上是让Spring执行无参或有参构造器 使用<propert ...

  10. 实验之-----------修改oracle实例名

    --查询当前数据库实例名称: SQL> select instance_name,status from v$instance; INSTANCE_NAME STATUS------------ ...