addEventNative

addEventNative is a thin wrapper over addEventListener that accepts either a plain function or a handler object — when an object is passed, the object itself doubles as the options bag. Use it for listeners outside of a JSX element (window / document / manually-acquired nodes); pair with passiveEvent for a passive listener and removeEventNative to detach. Part of pota/use/event.

Examples

Attaching and detaching a passive listener

Registers a passive wheel listener on window, then removes it with the same handler reference. Passing a passiveEvent object hands the options bag and the handler to addEventListener in one go.

import { render, signal } from 'pota'
import {
	addEventNative,
	removeEventNative,
	passiveEvent,
} from 'pota/use/event'

function App() {
	const log = signal('scroll to see wheel events')

	const handler = passiveEvent((e: WheelEvent) =>
		log.write(`wheel ${e.deltaY}`),
	)

	addEventNative(window, 'wheel', handler)

	return (
		<div>
			<button
				on:click={() => removeEventNative(window, 'wheel', handler)}
			>
				remove listener
			</button>
			<p>{log.read}</p>
		</div>
	)
}

render(App)