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。

     

     
  • 相关阅读:
    stenciljs 学习四 组件装饰器
    stenciljs 学习三 组件生命周期
    stenciljs 学习二 pwa 简单应用开发
    stenciljs ionic 团队开发的方便web 组件框架
    stenciljs 学习一 web 组件开发
    使用npm init快速创建web 应用
    adnanh webhook 框架 hook rule
    adnanh webhook 框架 hook 定义
    adnanh webhook 框架request values 说明
    adnanh webhook 框架execute-command 以及参数传递处理
  • 原文地址:https://www.cnblogs.com/lydialee/p/4733085.html
Copyright © 2011-2022 走看看