Event Handling

/**
 * Add event listener to current component element
 * @param event - Event name
 * @param handler - QRL event handler
 */
function useOn(event: string, handler: QRL<(event: Event) => void>): void;

/**
 * Add event listener to document
 * @param event - Event name  
 * @param handler - QRL event handler
 */
function useOnDocument(event: string, handler: QRL<(event: Event) => void>): void;

/**
 * Add event listener to window
 * @param event - Event name
 * @param handler - QRL event handler  
 */
function useOnWindow(event: string, handler: QRL<(event: Event) => void>): void;

// Event handler type
type EventHandler<T, E> = QRL<(event: E, element: T) => any>;

// Multi-event handler type
type QRLEventHandlerMulti<T, E> = QRL<(event: E, element: T) => any> | undefined;

import { component$, useOn, useOnDocument, useOnWindow, $ } from "@builder.io/qwik";

export const EventDemo = component$(() => {
  // Component-level event listener
  useOn("click", $(() => {
    console.log("Component clicked");
  }));

  // Document-level event listener
  useOnDocument("keydown", $((event: KeyboardEvent) => {
    if (event.key === "Escape") {
      console.log("Escape pressed");
    }
  }));

  // Window-level event listener
  useOnWindow("resize", $(() => {
    console.log("Window resized");
  }));

  return <div>Click me or press Escape</div>;
});