Is it possible to call a class method with addEventListener?

Question

Just something I've been wondering. In the second parameter in the .addEventListener method, can you call a "(custom) class method" instead of a function?

i.e Would something like the following work?

var object = new ClassName();
document.getElementById('x').addEventListener('click', object.method, false);

Answer 1

I just tried a more direct approach, it appears to work and I'd say it's pretty clean. I just add ...bind(this) to the argument to addEventListener(). Don't make it complicated when it's not...

class HTMLExample extends HTMLElement{
  constructor(){
    super();
    this.count = 0;
    this.addEventListener('click', this.onClick.bind(this), false);        
  }
  
  onClick(event){
    let prevCount = this.count;
    this.count++;    
    let msg = `Increased Count from ${prevCount} to ${this.count}`;
    document.getElementById("log").innerHTML += `${msg}<br/>`;     
  }
}

Answer 2

No, what you've written wouldn't work, in that method would be invoked without object as its context. Inside method, this would be set to the DOM element which initiated the event.

If you want to invoke the method and retain the context, close over the object variable with a function:

var object = new ClassName();
document.getElementById('x').addEventListener('click', function () {
  object.method()
}, false);