IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    addEventListener方法的this指向

    囧囧发表于 2015-11-05 08:03:32
    love 0

    使用JS原型封装对象的时候,绑定事件我一般习惯这样写:

    var obj = function() {...}
    
    obj.prototype.bindEvn = function(e){
         e.addEventListener(Event,obj.method.bind(this),false)
    }
    
    obj.prototype.method = function(){...}

    这里addEventListener中this的指向我不是太清晰, 虽然一直以来都直接用bind设置this的值(毫无疑问地返回了一个绑定了obj对象的函数),但是如果没用bind方法会是种什么情况? 这里面的this指向是调用addEventListener方法的对象呢还是obj(如果这样那么我这bind白用了?)
    马上做个demo看下到底啥情况:
    DEMO地址
    (貌似demo设计得有点略傻?)

    //定义一个可见的盒子用于绑定点击事件
    var box = document.getElementById('box');
    box.x = 'box'
    
    //设置执行函数的对象属性
    function outFunc() {
      this.x = 'outFunc';
      box.addEventListener('click', func, false);
    }
    outFunc();
    
    function func() {
      console.log(this.x); //输出box 说明该this指向的是调用addEventListener的对象
    }

    当用bind设置this值的时候, this才指向执行函数

    function outFunc() {
      this.x = 'outFunc';
      box.addEventListener('click', func。bind(this), false);
    }
    function func() {
      console.log(this.x); //输出outFunc 使用bind设置this的值
    }

    在stackoverflow上也有类似问题的讨论:
    The value of “this” within the handler using addEventListener
    自己动手,丰衣足食,吃早餐去了~



沪ICP备19023445号-2号
友情链接