// it can also be used with any HTML Element if you can get a reference to it
createEventListener(
document.getElementById("myButton"),
"mousemove",
e => console.log("x:", e.pageX, "y:", e.pageY),
{ passive: true }
);
`

#### Custom events

`ts
// you can provide your own event map type as well:
// fill both type generics for the best type support
createEventListener<{ myCustomEvent: MyEvent; other: Event }, "myCustomEvent">(
window,
"myCustomEvent",
() => console.log("yup!"),
);
// just don't use interfaces as EventMaps! (write them using type keyword)
`

#### Removing event listeners manually

Since version @2.0.0 createEventListener and other reactive primitives aren't returning a clear() function, because of it's flawed behavior described in this issue.

Although there are still ways to remove attached event listeners:

1. Changing reactive target or type arguments to an empty array.

`ts
const [type, setType] = createSignal<"click" | []>("click");
createEventListener(window, type, e => {...});
// remove listener:
setType([]);
`

2. Wrapping usage of createEventListener primitive in Solid's createRoot or createBranch | createDisposable from "@solid-primitives/rootless".

`ts
import { createDisposable } from "@solid-primitives/rootless";

const clear = createDisposable(() => createEventListener(element, "click", e => {...}));
// remove listener:
clear();
`

#### Listening to multiple events

###### Added in @1.4.3

You can listen to multiple events with single createEventListener primitive.

`ts
createEventListener(el, ["mousemove", "mouseenter", "mouseleave"], e => {});
`

$3

props passed to the directive are also reactive, so you can change handlers on the fly.

`tsx
import { eventListener } from "@solid-primitives/event-listener";
// avoids tree-shaking the directive:
eventListener;

console.log("Click")]}>Click!;
`

createEventSignal

Like createEventListener, but events are handled with the returned signal, instead of with a callback.

$3

`ts
import { createEventSignal } from "@solid-primitives/event-listener";

// all arguments can be reactive signals
const lastEvent = createEventSignal(el, "mousemove", { passive: true });

createEffect(() => {
console.log(lastEvent()?.x, lastEvent()?.y);
});
`

createEventListenerMap

A helpful primitive that listens to a map of events. Handle them by individual callbacks.

$3

`ts
import { createEventListenerMap } from "@solid-primitives/event-listener";

createEventListenerMap(element, {
mousemove: mouseHandler,
mouseenter: e => {},
touchend: touchHandler,
});

// both target can be reactive:
const [target, setTarget] = createSignal(document.getElementById("abc"));
createEventListenerMap(
target,
{
mousemove: e => {},
touchstart: e => {},
},
{ passive: true },
);

// createEventListenerMap can be used to listen to custom events
// fill both type generics for the best type support
createEventListenerMap<{
myEvent: MyEvent;
custom: Event;
other: Event;
}>(target, {
myEvent: e => {},
custom: e => {},
});
`

WindowEventListener

Listen to the window DOM Events, using a component.

You can use it with any Solid's Control-Flow components, e.g. or .

The event handler prop is reactive, so you can use it with signals.

$3

`tsx
import { WindowEventListener } from "@solid-primitives/event-listener";

console.log(e.x, e.y)} />;
`

DocumentEventListener

The same as WindowEventListener, but listens to document events.

$3

`tsx
import { DocumentEventListener } from "@solid-primitives/event-listener";

console.log(e.x, e.y)} />;
`

Callback Wrappers

$3

Wraps event handler with e.preventDefault() call.

`tsx
import { preventDefault, makeEventListener } from "@solid-primitives/event-listener";

const handleClick = e => {
concole.log("Click!", e);
};

makeEventListener(window, "click", preventDefault(handleClick), true);
// or in jsx: