3.0.0

A huge thank you to @Andarist for the TypeScript improvements for bind-event-listener that went into this release 👏

New: Autocomplete for event names

With TypeScript@5+ you can now get wonderful autocomplete for event names on EventTarget's for bind and bindAll.

Before No auto complete for event names 😢	After Auto complete for event names 😁

• #94
• #98

Change: As many correctly typed event listeners for bindAll as you like

bindAll previously supported correct typing on up to 12 event listeners. Now, bindAll supports correct typing on as many event listeners as you like. To help facilitate this change, we have changed the type signature of bindAll from taking strings, to taking an array of strings

- bindAll<HTMLElement, 'click', 'keydown'>(button, [/*bindings*/]);
+ bindAll<HTMLElement, ['click', 'keydown']>(button, [/*bindings*/]);

We generally recommend you don't provide the values for the bind or bindAll generics, and rather just let them be inferred.

import { bind, bindAll } from 'bind-event-listener';

const button = document.querySelector('button');
if (!button) {
  return;
}

const unbind = bind(button, { type: 'click', listener(event) {} });

const unbindAll = bindAll(button, [
  { type: 'click', listener(event) {} },
  { type: 'keydown', listener(event) {} },
]);

💥 This change was listed as a breaking change as it changed the public type signature of bindAll

• #94
• #98

Other

• Improved clarity of readme #101
• Bumping dev dependencies #99
• Moved repo to TypeScript@5 #99
• Type check tests will now run as a part of the build #99

2.1.1

• doubling full typescript support for bindAll from six event listeners to twelve.

2.1.0

API changes

No behaviour or API changes.

A new TypeScript public type: Listener

The type Listener<EventTarget, EventName> will return a correctly typed event listener function or object for an event on an event target

import { Listener } from 'bind-event-listener';

type Result = Listener<HTMLElement, 'click'>;
// (this: HTMLElement, event: MouseEvent) => void

2.0.0

New: full typescript support 🥳

This release has no API changes. The only change is a dramatic improvement to the typescript types. It is such a large improvement to the typescript types that I have labeled it as a breaking change to avoid breaking peoples builds.

A huge thank you to @Ayub-Begimkulov for his work improving the typescript types 👏❤️

Types: the event object

Event listener functions will now have the correct event type inferred based on the provided arguments.

  const button = document.querySelector('button');
  invariant(button instanceof HTMLElement);

  bind(button, {
    type: 'click',
+    // `event` is now correctly set as a `MouseEvent`
    listener: function onClick(event) {
+   // can safely use the `MouseEvent` properties
      console.log(event.button);
   },
  });

Incorrect event typings will now cause a typescript error

+ // Incorrect types will now correctly be caught as an error.
+ // In this can the event should be a `MouseEvent` and not a `KayboardEvent`
const onClick = function onClick(event: KeyboardEvent) {

}

bind(button, {
  type: 'click',
   listener: onClick,
});

Types: this binding

For an event listener function, the this context of the function is set to the EventTarget that the event listener is bound to

const button = document.querySelector('button');
invariant(button instanceof HTMLElement);

bind(button, {
  type: 'click',
   listener: function onClick(event) {
+     // the `this` value is correctly set to the `button`, which is a `HTMLElement`
   }
});

For an event listener object, the this context of the function is set to the event listener object

const object = {
  handleEvent(event) {
+  // `this` is correctly set to `object`
  }
}

bind(button, {
  type: 'click',
   listener: object
});

Breaking change

On balance I thought that a major correctly flags this release as higher risk as it is likely to 'break' a few consumers types

• To facilitate these type improvements, bind-event-listener now requires TypeScript 4.1+
• Because the types are getting more correct, and a lot tighter, this is likely to cause some (correct) typescript breakages in projects. The number of these might be significant for larger projects