Quick Example

useEventListener Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `use-event-listener`

Code

                <script lang="ts">
 import { useEventListener } from 'svelora';

 let button = $state<HTMLButtonElement | null>(null);

 useEventListener(() => button, 'click', () => {
  console.log('clicked');
 });
</script>

<button bind:this={button}>Click me</button>

useEventListener

Attach event listener(s) to a target with automatic cleanup. The target may be a value or a reactive getter, accepts one or many event types, and forwards listener options. SSR-safe — a nullish target is a no-op.

Window resize

Listens to resize on window. Resize the browser window to see it update.

0 × 0 live viewport size

Keyboard

Listens to keydown on window. Press any key.

Last key: — Pressed: 0x

Pointer position (reactive element target)

Listens to pointermove / pointerenter / pointerleave on an element resolved via a () => box getter, so the listener binds once the element mounts. Move your cursor inside the box.

x: 0, y: 0