Question

我有一个类在加载时将一个eventListener赋给一个html元素。当单击该html元素时，它会调用同一个类中的函数，如下所示：

class LiveViewController extends ViewController{

viewLoads(){
    $("#mydiv")[0].addEventListener("click",this.someFunction);
}

someFunction(){
    console.log(this);
}

}

问题是我想以某种方式在someFunction中引用类的实例，但“this”指的是元素本身。你建议的做法是什么？

Answer 1

当您在jQuery中指定要用作事件处理程序的函数时，该函数可以访问以this启动事件的原始DOM元素。因此，经典的解决方案是将处理程序内的类上下文关闭为self：

class LiveViewController extends ViewController{

  viewLoads(){
    var self = this;
    $("#mydiv")[0].addEventListener("click", function() {
      self.someFunction(self);
    });
  }
  someFunction(context){
    console.log(context);
  }
}

您甚至根本不需要传递上下文：

class LiveViewController extends ViewController{

  viewLoads(){
    var self = this;
    $("#mydiv")[0].addEventListener("click", function() {
      self.someFunction();
    });
  }
  someFunction(){
    console.log(this);
  }
}

最后，您可以使用.bind绑定适当的上下文：

class LiveViewController{
  viewLoads(){
    $("#mydiv")[0].addEventListener("click", this.someFunction.bind(this));
  }
  someFunction(){
    console.log(this);
  }
}

要访问实例化对象和dom元素，可以使用

class LiveViewController extends ViewController{

  viewLoads(){
    var self = this;
    $("#mydiv")[0].addEventListener("click", function() {
      self.someFunction(this);
    });
  }
  someFunction(element){
    console.log(this);
    console.log(element);
  }
}

Answer 2

你可以试试这个：

 class LiveViewController extends ViewController {

     viewLoads(){
         // You can pass data to the callback directly as event.data in jQuery
         $("#mydiv").on('click', {self: this}, this.someFunction);  

         // or Another way would be to use bind
         // $("#mydiv").click(this.someFunction.bind($, this));
         // someFunction(self, event) - definition
     }

     someFunction(event){
        console.log(event.data.self);
     }
  }

从html元素调用函数时引用函数类

2 个答案: