统一addEventListener与attachEvent中this指向问题
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指向问题的更多相关文章
- attachEvent 中this指向
IE中使用的事件绑定函数与Web标准的不同,而且this指向也不一样,Web标签中的this指向与传统事件绑定中的this一样,是当前目标,但是IE中事件绑定函数中this指向,通过使用call或ap ...
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
- addEventListener和attachEvent的区别(转载)
attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...
- 注册事件处理程序onclick和addEventListener、attachEvent
一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- addEventListener 与attachEvent
第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...
- JavaScript中this指向的简单理解
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
随机推荐
- 关于Vue问题记录
第一次安装Vue时,npm run dev报错处理 1.如果是报错:提示说没找到test这个文件夹 参考资料:https://segmentfault.com/q/1010000010893904 就 ...
- JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片
首先我们来看效果图: 点击上传之后如下: 在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传! 不多说,上代码:先看div布局: <div class="imageCont ...
- Beautiful Dream hdu3418 (直接做或二分)
Beautiful Dream Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- python之路第五篇之装饰器:(进阶篇)
装饰器: 学前必备知识: def f1(): print "f1" f1() #表示函数执行 f1 #表示函数,指向内存地址 f1 = lambda x: x + 1 f1() # ...
- FTP基本操作类大全,外加c#基础公共帮助类
总结平时用到的一些FTP操作类,方便需要的用到.github地址:https://github.com/Jimmey-Jiang/Common.Utility 1.连接FTP服务器 /// <s ...
- Oracle 之——子查询 DDL DML 集合 及其他数据对象
Oracle 学习笔记(二) 知识概要: 1.子查询 2.集合操作 3.DML语句操作 4.其他数据库对象 1.子查询 查询工资比SCOTT高的员工信息 1 select * 2 from emp ...
- Django扩展自定义manage命令
使用django开发,对python manage.py ***命令模式肯定不会陌生.比较常用的有runserver,migrate... 本文讲述如何自定义扩展manage命令. 1.源码分析 ma ...
- 初识Hibernate之继承映射
前面的两篇文章中,我们介绍了两张表之间的各种相互关联映射关系,但往往我们也会遇到两张表甚至多张表之间共有着多个相同的字段.例如: 如图,student表和teacher表共同具有id,nam ...
- C#高级编程第9版 阅读笔记(一)
一.前言 C# 简洁.类型安全的面向对象的语言. .NET是一种在windows平台上编程的架构——一种API. C#是一种从头开始设计的用于.NET的语言,他可以利用.NET Framework及其 ...
- CSS3实现3D旋转相册
静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...