addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
最近在写一个事件代理的时候，遇到一个BUG，发现除此外，二者绑定的执行函数中的 this 是不相同的，addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。
用了一个简单的demo来描述这个不同点：
<<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。
addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】的更多相关文章
- js匿名自执行函数中闭包的高级使用(---------------------------******-----------------------------)
先看看最常见的一个问题: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- setTimeout中所执行函数中的this，永远指向window
注意是要延迟执行的函数中的this哦!! //片段一 setTimeout("alert(this)", 1); // [object Window] //片段二 var obj ...
- 三. var let const的理解 以及 立即执行函数中的使用 以及 for循环中的例子
一. 立即执行函数 windows中有个name属性,name='' '' var 如果我们用var name 去声明,那就会改变windows中name的值(因为我们不是在函数作用域中声明的,所以会 ...
- js立即执行函数
一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); ...
- 立即执行函数（自执行函数） IIFE
// 最常用的两种写法 (function(){ /* code */ }()); // 老道推荐写法 (function(){ /* code */ })(); // 当然这种也可以 // 括号和J ...
- JavaScript中为什么使用立即执行函数来封装模块？
最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量. 实现封装私有变量的方法主要是: 使用构造函数 func ...
- ;(function(){ //代码})(); 自执行函数开头为什么要加；或者！
我们有时候会在自执行函数中看到这样的代码;(function(){ //我们的代码.. alert('Hello!'); })(); !(function(){ //我们的代码.. alert('He ...
- js匿名自执行函数
匿名自执行函数:没有方法名的函数闭包:闭包是指有权访问另一个函数作用域变量的函数: 通过一个实例来解释: 从网上找到了一个案例,使用了for循环.匿名自执行函数.setTimeout. 案例1: va ...
- js闭包中的this（匿名函数中的this指向的是windows）
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
随机推荐
- Java源码学习:HashMap实现原理
AbstractMap HashMap继承制AbstractMap,很多通用的方法,比如size().isEmpty(),都已经在这里实现了.来看一个比较简单的方法,get方法: public V g ...
- 你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析
AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究.产品研发.开源项目的经验沉淀.AC2017 将会继续在工 ...
- Twitter的分布式系统中ID生成方法——Snowflake
Twitter-Snowflake算法产生的背景相当简单,为了满足Twitter每秒上万条消息的请求,每条消息都必须分配一条唯一的id,这些id还需要一些大致的顺序(方便客户端排序),并且在分布式系统 ...
- .NET第四章总结
.NET第四章简单总结 1.简单的获取文件路径: 2.回车跳转控件焦点 3.*************无标题窗体拖动!!************* 1): ...
- Python数据分析(二): Numpy技巧 (1/4)
In [1]: import numpy numpy.__version__ Out[1]: '1.13.1' In [2]: import numpy as np
- Maximum 贪心
Maximum Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Des ...
- 移动WEB 响应式设计 @media总结
第一种: 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media featur ...
- HDU1411 欧拉四面体
用向量解决: 三角形面积:S=1/2*|x1*y2-x2*y1|; (粗体表示向量) 三棱锥体积:V=1/6*(OA*OB)*OC 不知道哪里去找的代码,毕竟很线性代数矩阵什么的很头疼,晚上 ...
- ubuntu 14.04 vim YoucompleteMe 代码自动补全工具安装
安装步骤如下: sudo apt-get install vim ; sudo apt-get install vim-youcompleteme ; sudo apt-get install vim ...
- [BC]Four Inages Strategy（三维空间判断正方形）
题目连接 :http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=577&pid=1001 题目大意:在三维空间中, ...