Rule proposal: Disallow calling add/removeEventListener with the result of a bound function call

Calling this.addEventListener('event', myFunc.bind(this)) and this.removeEventListener('event', myFunc.bind(this)) has always been an indication of an error to me. The corresponding removeEventListener isn’t actually doing anything because the .bind call creates a new function.

Not sure what I’d call this rule. disallow-anonymous-event-handler ?

This was requested in eslint but for some reason got rejcted.

Fail

class MyClass extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', this.handleClick.bind(this));
  }

  disconnectedCallback() {
    this.removeEventListener('click', this.handleClick.bind(this));
  }

  handleClick() { /* ... */ }
}

Pass

class MyClass extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', this.handleClick);
  }

  disconnectedCallback() {
    this.removeEventListener('click', this.handleClick);
  }

  handleClick = () => { /* ... */ }
}

[bschlenk]

It’s valid code in that it doesn’t throw any errors, but it doesn’t remove the event listener. That would be the reason to have this rule.

What about this case:

this.addEventListener('click', this.handleClick.bind(this));
this.removeEventListener('click', this.handleClick)

I’ve seen someone write this code too. The removeEventListener call isn’t using bind, but it is still broken.

Maybe it can be configurable which methods it disallows? I’d set it up to fail on both, since there are plenty of alternatives to bind that work. But someone else can set it up only to fail for removeEventListener. The point is to prevent code that can easily cause errors.

[fisker]

We’ll forbid any listener that it’s not a reference, including

foo.removeEventListener('click', function () {})

foo.removeEventListener('click', () => {})

foo.removeEventListener('click', bar.bind(null))