Why can't I call class function inside addEventListener

Question

Why am I unable to return the element_id in the run function? The script works if I set it as let self = this; function(){ self.run() }

Doesn't work:

class clickin {
    constructor(element_id) {
      this.element = document.getElementById(element_id);
      this.element.addEventListener('click', this.run);
    }
    run() {
      alert('Element id: ' + element_id);
    }
}

Works:

   class clickin {
        constructor(element_id) {
          this.element = document.getElementById(element_id);
          let self = this;

          this.element.addEventListener('click', function(){
            self.run();
          });
        }
        run() {
          alert('Element id: ' + element_id);
        }
    }

Use the fat arrow syntax instead `run = () => { /* do stuff */ };` — Derek, Sep 24 '18 at 22:23
Sublime doesn't like the color, but that works. Why is that? Is it because set() is a anon function? — Matt, Sep 24 '18 at 22:25
no, it's because the ES6 arrow syntax automatically binds methods to instantiated class objects — Derek, Sep 24 '18 at 22:27
@Matt Take a look at this article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions . — Szab, Sep 24 '18 at 22:29

tech-y · Accepted Answer · 2018-09-24T22:59:55.910

Using the addEventListener object, you are setting a callback function which will be called when the event is fired. So, it runs in a different context than your constructor function. In that case, the "caller(this)" object changes, and thus, this.run you mentioned above won't work. But, when you assign "clickin" class object to a variable "self", you are able to run because self is available in callback function as a closure, and when event handler executes, it is able to access that "clickin" object. You might want to look deeper into below topics for better understanding.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

score 7 · Answer 2 · answered Sep 24 '18 at 22:36

7

Alternatively, if you don't want to deal with class properties (as mentioned in the comments), just use an arrow function in the constructor instead:

class clickin {
  constructor(id) {
    this.element = document.getElementById(id);
    this.element.addEventListener('click', () => this.run(id));
  }
  run(id) {
    alert('Element id: ' + id);
  }
}

const c = new clickin('a');

<div id="a">aaa</div>

answered Sep 24 '18 at 22:36

Andy

61,948
13
68
95

In my opinion, this is the best answer -- just use an arrow function, and you can call any other functions/methods in the class with the key word "this" INSIDE that arrow function. – William Hou Jun 05 '23 at 21:34

Why can't I call class function inside addEventListener

2 Answers2