diff --git a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts index 76c75f92..b1c53152 100644 --- a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts +++ b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts @@ -4,14 +4,14 @@ import { addEventListener } from "$lib/internal/utils/event.js"; export function useEventListener( target: MaybeBoxOrGetter, - event: TEvent, + event: TEvent | TEvent[], handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): void; export function useEventListener( target: MaybeBoxOrGetter, - event: TEvent, + event: TEvent | TEvent[], handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): void; @@ -21,21 +21,21 @@ export function useEventListener< TEvent extends keyof HTMLElementEventMap, >( target: MaybeBoxOrGetter, - event: TEvent, + event: TEvent | TEvent[], handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): void; export function useEventListener( target: MaybeBoxOrGetter, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ): void; export function useEventListener( _target: MaybeBoxOrGetter, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ) { diff --git a/packages/runed/src/lib/internal/utils/event.ts b/packages/runed/src/lib/internal/utils/event.ts index 4c67e710..c495b3f0 100644 --- a/packages/runed/src/lib/internal/utils/event.ts +++ b/packages/runed/src/lib/internal/utils/event.ts @@ -1,56 +1,81 @@ /** - * Overloaded function signatures for addEventListener + * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. + * @param target The target element to add the event listener to. + * @param event The event(s) to listen for. + * @param handler The function to be called when the event is triggered. + * @param options An optional object that specifies characteristics about the event listener. + * @returns A function that removes the event listener(s) from the target element. */ export function addEventListener( target: Window, - event: TEvent, + event: TEvent | TEvent[], handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): VoidFunction; +/** + * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. + * @param target The target element to add the event listener to. + * @param event The event(s) to listen for. + * @param handler The function to be called when the event is triggered. + * @param options An optional object that specifies characteristics about the event listener. + * @returns A function that removes the event listener(s) from the target element. + */ export function addEventListener( target: Document, - event: TEvent, + event: TEvent | TEvent[], handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): VoidFunction; +/** + * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. + * @param target The target element to add the event listener to. + * @param event The event(s) to listen for. + * @param handler The function to be called when the event is triggered. + * @param options An optional object that specifies characteristics about the event listener. + * @returns A function that removes the event listener(s) from the target element. + */ export function addEventListener< TElement extends HTMLElement, TEvent extends keyof HTMLElementEventMap, >( target: TElement, - event: TEvent, + event: TEvent | TEvent[], handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): VoidFunction; +/** + * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. + * @param target The target element to add the event listener to. + * @param event The event(s) to listen for. + * @param handler The function to be called when the event is triggered. + * @param options An optional object that specifies characteristics about the event listener. + * @returns A function that removes the event listener(s) from the target element. + */ export function addEventListener( target: EventTarget, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ): VoidFunction; -/** - * Adds an event listener to the specified target element for the given event, and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event to listen for. - * @param handler The function to be called when the event is triggered. - * @param options An optional object that specifies characteristics about the event listener. - * @returns A function that removes the event listener from the target element. - */ export function addEventListener( target: EventTarget, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ) { - // Add the event listener to each specified event for the target element. - target.addEventListener(event, handler, options); + const events = Array.isArray(event) ? event : [event]; + + for (const event of events) { + target.addEventListener(event, handler, options); + } - // Return a function that removes the event listener from the target element(s). return () => { - target.removeEventListener(event, handler, options); + for (const event of events) { + target.removeEventListener(event, handler, options); + } }; }