Referencing class for function when function is called from html element

Question

I've got a class that assigns an eventListener to an html element when its loaded. When that html element is clicked, it invokes a function from that same class like so:

class LiveViewController extends ViewController{

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

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

}

The issue is that i would like to somehow have a reference of the instance of the class in someFunction but "this" refers to the element itself. What would be your suggested way of doing this?

Possible duplicate of How does the "this" keyword work?

jonrsharpe
– jonrsharpe

2017-10-29 11:28:30 +00:00
Commented Oct 29, 2017 at 11:28 — jonrsharpe
– jonrsharpe, Commented Oct 29, 2017 at 11:28

dhilt · Accepted Answer · 2017-10-29 12:04:00Z

1

When you specify a function to be used as an event handler in jQuery, that function gets access to the raw DOM element that initiated the event as this. So the classical solution would be to closure the class context inside the handler as self:

class LiveViewController extends ViewController{

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

You even don't need to pass the context at all:

class LiveViewController extends ViewController{

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

At last you may use .bind to bind appropriate context:

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

To get an access to both of instantiated object and dom element you may use

class LiveViewController extends ViewController{

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

edited Oct 29, 2017 at 12:04

answered Oct 29, 2017 at 11:22

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Return-1 Over a year ago

Why cant i +5 this?

dhilt Over a year ago

@GeorgeAvgoustis You also may "accept" this answer.

Return-1 Over a year ago

I will, just waiting for the time limit. Not to stretch it but.. how would i go about if i wanted to have access BOTH to the class AND the element?

Return-1 Over a year ago

Ok thats a good way. Is it too stupid to do : $("#rollDieDiv")[0].addEventListener("click",this.rollDiePressed.bind({"element":$("#rollDieDiv")[0],"classInstance":this})); ?

Arjun Kariyadan · Accepted Answer · 2017-10-29 12:00:13Z

0

You can try this:

 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);
     }
  }

edited Oct 29, 2017 at 12:00

answered Oct 29, 2017 at 11:43

Arjun Kariyadan

4993 silver badges12 bronze badges

Collectives™ on Stack Overflow

Referencing class for function when function is called from html element

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related