addEventListener和attachEvent二者绑定的执行函数中的this不相同


Posted in Javascript onDecember 09, 2012

写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前者是Firefox chrome,后者只是存在于IE系列中。

最近在写一个事件代理的时候,遇到一个BUG,发现除此外,二者绑定的执行函数中的 this 是不相同的,addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。
用了一个简单的demo来描述这个不同点:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<<title>测试</title> 
</head> 
<<body> 
<div id="div1"> 
<a href="#" id="a1">test1</a> 
</div> 
<<div id="div2"> 
<a href="#" id="a2">test2</a> 
</div> 
</body> 
<<script type="text/javascript"> 
var testGolb = "diff"; // 定义一个全局变量 
var a1 = document.getElementById( "a1"); 
var a2 = document.getElementById( "a2"); 
function getEleId ( e) { 
// body... 
alert( this.id); 
alert( this.testGolb); 
} 
a1.onclick = getEleId; 
if( a2.attachEvent){ 
a2.attachEvent( "onclick", getEleId); 
}else{ 
a2.addEventListener( 'click',getEleId); 
} 
</script> 
</html>

点击 test1
chrome 下 第一次alert:" a1",第二次alert :"undefined"
firefox 下 第一次alert:" a1",第二次alert :"undefined"
IE 中 第一次alert:" a1",第二次alert :"undefined"
这很好理解,这时候的this指向 #a1 这个DOM,所以alert id是 #a1的id “a1”,然后在this中,并没有testGolb这个变量,所以是undefined
点击 test2
chrome下 第一次alert:" a1",第二次alert :"undefined"
firefox 下 第一次alert:" a1",第二次alert :"undefined"
IE 中 第一次alert:" undefined",第二次alert :"diff"

chrome 和 firefox同点击test1时候的表现是一致的,而IE就不同了。使用attachEvent绑定事件时候,函数中的this指向的是window,并不是添加事件的dom,所以第一次的alert 值是 undefined,而this.testGlob 的值是diff。

Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 #Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 #Javascript
javascript操作JSON的要领总结
Dec 09 #Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 #Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 #Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 #Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 #Javascript
You might like
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python的装饰器用法学习笔记
2016/06/24 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python目录和文件处理总结详解
2019/09/02 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
会计毕业自我鉴定
2014/02/05 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
宣传普通话标语
2014/06/27 职场文书
人事局接收函
2015/01/30 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书