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 ...
随机推荐
- JS -- The Scope Chain 作用域链
The Scope Chain JavaScript is a lexically scoped language: the scope of a variable can be thought of ...
- 第4章 同步控制 Synchronization ----Interlocked Variables
同步机制的最简单类型是使用 interlocked 函数,对着标准的 32 位变量进行操作.这些函数并没有提供"等待"机能,它们只是保证对某个特定变量的存取操作是"一个一 ...
- const的用法，特别是用在函数前面与后面的区别！
const的用法,特别是用在函数后面 在普通的非 const成员函数中,this的类型是一个指向类类型的 const指针.可以改变this所指向的值,但不能改变 this所保存的地址. 在 const ...
- Qt学习之路MainWindow学习过程中的知识点
一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域: 二.QAction类 QAct ...
- Linux脚本入门（1）
1. Linux 脚本编写基础1.1 语法基本介绍1.1.1 开头程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例 ...
- java中需要注意的小细节
很早以前就打算写博客,但是总是因为不知道写什么,或是觉得博客里其他人已经把我要写的整理很好了而迟迟没有动笔,现在决定把自己平时的记录的一些笔记拿出来,希望大神们可以批评指导,并且希望能够帮助一些刚刚入 ...
- C#取得站点跟目录
string strServer = "http://" + Request.ServerVariables["SERVER_NAME"].ToString() ...
- Python实战之set学习笔记及简单练习
['__and__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...
- (原)怎样解决python dataframe loc，iloc循环处理速度很慢的问题
怎样解决python dataframe loc,iloc循环处理速度很慢的问题 1.问题说明 最近用DataFrame做大数据 处理,发现处理速度特别慢,追究原因,发现是循环处理时,loc,iloc ...
- mysql explain 分析sql语句
鉴于最近做的事情,需要解决慢sql的问题,现补充一点sql语句性能分析之explain的使用方式! 综合返回数据情况,分析各个参数,可以了解sql 使用方法:explain + sql语句 如 :e ...