zoukankan      html  css  js  c++  java
  • addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】

     

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

     

     
  • 相关阅读:
    扫面线模板
    (动态规划、栈)leetcode 84. Largest Rectangle in Histogram, 85. Maximal Rectangle
    tmux 常见命令汇总
    leetcode 221
    leetcode 319 29
    (贪心)leetcode 392. Is Subsequence, 771. Jewels and Stones, 463. Island Perimeter
    leetcode 982 668
    Python import 同文件夹下的py文件的函数,pycharm报错
    Windows里Anaconda-Navigator无法打开的解决方案
    Windows下 gpu版 Tensorflow 安装
  • 原文地址:https://www.cnblogs.com/lydialee/p/4733085.html
Copyright © 2011-2022 走看看