The Fantastically Magical handleEvent Function

Let's take a look!

I remember how I reacted when I found out about this years ago, also I still had a majestic mustache.

That's right, this works, it's weird but it does.

If you set an object as the handler to addEventListener and said object has a property that is named handleEvent and that property is of type function the event is automatically sent there.

The reason this works (and works on all browsers):

The need for compatibility with legacy content required EventListener to accept both a function and an object with a handleEvent() property function.

EventListener on MDN

Another nice thing about this is that this keeps this working.

So, no need for bind(this) to ensure you end up in the right scope. Also, events are easily removed with removeEventListener('click', this)

Instead of having different functions to handle events, you can use a single handleEvent function to route all kinds of events.

class MyClass {

  constructor() {

    // Get a reference to the button node
    const btn = document.querySelector('button');
    const input = document.querySelector('input');

    // Handle clicks by this
    btn.addEventListener('click', this);

    // Handle input by this
    input.addEventListener('input', this);

  }

  handleEvent(event) {
    if (event.type === 'click') {
      // handle button clicks 
    }
    else if (event.type === 'input') {
      // handle text input
    }
  }

}

I hope this sparked some interesting new ideas for you to work with!