如何从Javascript中的事件侦听器调用访问对象的属性?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (95)

下面我在Javascript中创建一个对象。在构造函数中,我正在设置一个事件监听器。问题是当事件被触发时,找不到this.prop,并且未定义打印输出。我该如何解决这个问题?

   var someObj = function someObj(){
       this.prop = 33;
        this.mouseMoving = function() { console.log(this.prop);}

        document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);

 }
提问于
用户回答回答于

当调用事件处理程序时,“this”不再引用“someObj”对象。需要将“this”捕获到mouseMoving函数将捕获的局部变量中。

var someObj = function someObj(){
    this.prop = 33;
    var self = this;
    this.mouseMoving = function() { console.log(self.prop);}

    document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);
}

假设“someObj是一个构造函数,即打算用as调用new someObj(),否则”this“将是全局范围。

“this”关键字在JavaScript中可能会引起混淆,因为它与其他语言的工作方式不同。要记住的关键是它在调用函数绑定到调用对象,而不是在创建函数绑定。

用户回答回答于

javascript内置的Function.prototype.bind()用于此目的 例如:

var someObj = function someObj(){
       this.prop = 33;
        this.mouseMoving = function() { console.log(this.prop);}

        document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving.bind(this),true);

 }

有关bind方法的更多信息,访问:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

另外必须将对象someObj的引用传递给元素并在行中使用该引用:

console.log(this.referenceToObject.prop); //this references the DOM element in an event.

扫码关注云+社区

领取腾讯云代金券