EventListenerController

Listens to one or more event types on a target while attached, with a listener typed from the target and the event type.

Reach for it for listeners on document or window, listeners added and removed at runtime, or listeners that need once, passive or capture.

Import

import { EventListenerController, createEventListenerController } from '@ecopages/radiant-ui/controllers';

Try it

A keydown listener on document. The event is a KeyboardEvent without a cast. Stop listening calls destroy().

<div data-example="event-listener">
	<p data-status>Press a key</p>
	<button type="button">Stop listening</button>
</div>

import { EventListenerController } from '@ecopages/radiant-ui/controllers';
 
export function mount(root: HTMLElement): () => void {
	const status = root.querySelector('[data-status]')!;
 
	const keys = new EventListenerController({
		getTarget: () => document,
		type: 'keydown',
		listener: (event) => (status.textContent = `Pressed ${event.key}`),
	});
	keys.attach();
 
	root.querySelector('button')!.addEventListener('click', () => keys.destroy());
	return () => keys.destroy();
}

mount runs once for each example element on the page, and the function it returns undoes it; see how the examples run.

Config

Lifecycle

attach() adds the listeners to the target. Attaching again with the same target changes nothing; with a different target it moves the listeners there. destroy() removes them.

With a host, createEventListenerController(host, config) does the same on connect and disconnect; see bindController.

Protected hooks

None. Change behavior through the config callbacks.