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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
详解http访问解析流程原理
Oct 18 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
比较node.js和Deno
Apr 27 Javascript
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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python中对list去重的多种方法
2014/09/18 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python selenium文件上传方法汇总
2020/11/19 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Python如何获取文件路径/目录
2020/09/22 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
六道php面试题附答案
2014/06/05 面试题
自我推荐书
2013/12/04 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
党支部审查意见
2015/06/02 职场文书
百年孤独读书笔记
2015/06/29 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python