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

yuanwen http://www.jb51.net/article/32511.htm

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

写 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。

转载于:https://www.cnblogs.com/lydialee/p/4733085.html

addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】相关推荐

浅谈自执行函数-立即调用的函数表达式
好文,屯一波:原文地址:https://www.jianshu.com/p/c64bfbcd34c3 在JavaScript中,会遇到自执行匿名函数:(function () {/*code*/} ) ...
闭包、立即执行函数、this
一.闭包 1.变量的作用域变量的作用域分为全局变量和局部变量. (1)全局变量与局部变量全局变量: 函数以外定义的变量是全局变量函数内部可以直接读取全局变量 // 全局变量var n = 202 ...
JavaScript基础08-day10【函数的返回值、实参、立即执行函数、方法、全局作用域、函数作用域、提前声明、this、工厂方法创建对象、构造函数】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
PHP执行命令的函数有,php的命令执行函数
php 动态执行函数,PHP学习你的知识信息已经过时了吗? ,php自动执行函数,php的命令执行函数 PHP 为执行外部命令提供大量函数_历史学_高等教育_教育专区.php基础PHP 为执行外部 ...
JavaScript 之立即执行函数
1.定义声明一个函数,并立即调用这个函数,此时这个函数就是立即执行函数,简单来说就是定义函数之后立即执行该函数.立即执行函数一般也写成匿名函数的形式,匿名函数写法为 function(){},就 ...
JavaScript之立即执行函数
我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用, function fn(){console.log(1);}fn(); 打印结果为: 如果不调 ...
javascript 匿名自执行函数
有一种匿名函数可以自动执行,这种函数定义如下: (function(){//执行一些语句 })(); 也可以为函数添加参数,语法格式如下: (function(arg_1,arg_2,...arg_n ...
匿名自执行函数是闭包吗？
匿名函数与闭包函数应该是不一样的,我看到网上很多人把匿名自执行函数当做闭包,我认为这是不对的, 闭包定义: 闭包是在一个函数中可以访问另外一个函数的作用域闭包: function fun ...
js中当等于最小值是让代码不执行_JavaScript中最最基础的知识点
JavaScript 中有很多很常用的也很基础的知识点需要我们牢牢记住,倒背如流,这样在开发的时候才能得心应手. 本文主要总结了DOM,Array,String,Math的一些常用方法,还有一些JS编 ...

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

addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】相关推荐

最新文章

热门文章