Function on

on<K extends keyof WindowEventMap>(
    target: Window,
    type: K,
    listener: (ev: WindowEventMap[K]) => void,
    options?: boolean | AddEventListenerOptions,
): IDisposable
Experimental
Subscribe to a DOM event on any EventTarget (window, document, HTML elements, etc.) and return an IDisposable that removes the listener when disposed.

Provides full TypeScript event type inference — the callback parameter is automatically typed based on the event name (e.g. "resize" → UIEvent, "click" → MouseEvent).

Use with DisposableStore.add for automatic lifecycle cleanup in components.
Type Parameters
- K extends keyof WindowEventMap
Parameters
- target: Window
  The EventTarget to listen on (window, document, an element, etc.)
- type: K
  The event name (e.g. "resize", "click", "keydown")
- listener: (ev: WindowEventMap[K]) => void
  The event handler callback
- Optionaloptions: boolean | AddEventListenerOptions
  Optional addEventListener options (passive, capture, once, signal)
Returns IDisposable
An IDisposable that removes the event listener when disposed
Example: Standalone usage
```
import { on } from "@needle-tools/engine";

const sub = on(window, "resize", (ev) => {
    // ev is typed as UIEvent
    console.log("resized", ev.target);
});

// Later: clean up
sub.dispose();
```
Example: With autoCleanup in a component
```
import { Behaviour, on } from "@needle-tools/engine";

export class MyComponent extends Behaviour {
    onEnable() {
        this.autoCleanup(on(window, "resize", (ev) => { /* UIEvent */ }));
        this.autoCleanup(on(document, "keydown", (ev) => { /* KeyboardEvent */ }));
        this.autoCleanup(on(this.context.domElement, "click", (ev) => { /* MouseEvent */ }));
    }
    // All listeners removed automatically on disable!
}
```
on<K extends keyof DocumentEventMap>(
    target: Document,
    type: K,
    listener: (ev: DocumentEventMap[K]) => void,
    options?: boolean | AddEventListenerOptions,
): IDisposable
Experimental
Subscribe to a DOM event on any EventTarget (window, document, HTML elements, etc.) and return an IDisposable that removes the listener when disposed.

Provides full TypeScript event type inference — the callback parameter is automatically typed based on the event name (e.g. "resize" → UIEvent, "click" → MouseEvent).

Use with DisposableStore.add for automatic lifecycle cleanup in components.
Type Parameters
- K extends keyof DocumentEventMap
Parameters
- target: Document
  The EventTarget to listen on (window, document, an element, etc.)
- type: K
  The event name (e.g. "resize", "click", "keydown")
- listener: (ev: DocumentEventMap[K]) => void
  The event handler callback
- Optionaloptions: boolean | AddEventListenerOptions
  Optional addEventListener options (passive, capture, once, signal)
Returns IDisposable
An IDisposable that removes the event listener when disposed
Example: Standalone usage
```
import { on } from "@needle-tools/engine";

const sub = on(window, "resize", (ev) => {
    // ev is typed as UIEvent
    console.log("resized", ev.target);
});

// Later: clean up
sub.dispose();
```
Example: With autoCleanup in a component
```
import { Behaviour, on } from "@needle-tools/engine";

export class MyComponent extends Behaviour {
    onEnable() {
        this.autoCleanup(on(window, "resize", (ev) => { /* UIEvent */ }));
        this.autoCleanup(on(document, "keydown", (ev) => { /* KeyboardEvent */ }));
        this.autoCleanup(on(this.context.domElement, "click", (ev) => { /* MouseEvent */ }));
    }
    // All listeners removed automatically on disable!
}
```
on<K extends keyof HTMLElementEventMap>(
    target: HTMLElement,
    type: K,
    listener: (ev: HTMLElementEventMap[K]) => void,
    options?: boolean | AddEventListenerOptions,
): IDisposable
Experimental
Subscribe to a DOM event on any EventTarget (window, document, HTML elements, etc.) and return an IDisposable that removes the listener when disposed.

Provides full TypeScript event type inference — the callback parameter is automatically typed based on the event name (e.g. "resize" → UIEvent, "click" → MouseEvent).

Use with DisposableStore.add for automatic lifecycle cleanup in components.
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- target: HTMLElement
  The EventTarget to listen on (window, document, an element, etc.)
- type: K
  The event name (e.g. "resize", "click", "keydown")
- listener: (ev: HTMLElementEventMap[K]) => void
  The event handler callback
- Optionaloptions: boolean | AddEventListenerOptions
  Optional addEventListener options (passive, capture, once, signal)
Returns IDisposable
An IDisposable that removes the event listener when disposed
Example: Standalone usage
```
import { on } from "@needle-tools/engine";

const sub = on(window, "resize", (ev) => {
    // ev is typed as UIEvent
    console.log("resized", ev.target);
});

// Later: clean up
sub.dispose();
```
Example: With autoCleanup in a component
```
import { Behaviour, on } from "@needle-tools/engine";

export class MyComponent extends Behaviour {
    onEnable() {
        this.autoCleanup(on(window, "resize", (ev) => { /* UIEvent */ }));
        this.autoCleanup(on(document, "keydown", (ev) => { /* KeyboardEvent */ }));
        this.autoCleanup(on(this.context.domElement, "click", (ev) => { /* MouseEvent */ }));
    }
    // All listeners removed automatically on disable!
}
```
on(
    target: EventTarget,
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
): IDisposable
Experimental
Subscribe to a DOM event on any EventTarget (window, document, HTML elements, etc.) and return an IDisposable that removes the listener when disposed.

Provides full TypeScript event type inference — the callback parameter is automatically typed based on the event name (e.g. "resize" → UIEvent, "click" → MouseEvent).

Use with DisposableStore.add for automatic lifecycle cleanup in components.
Parameters
- target: EventTarget
  The EventTarget to listen on (window, document, an element, etc.)
- type: string
  The event name (e.g. "resize", "click", "keydown")
- listener: EventListenerOrEventListenerObject
  The event handler callback
- Optionaloptions: boolean | AddEventListenerOptions
  Optional addEventListener options (passive, capture, once, signal)
Returns IDisposable
An IDisposable that removes the event listener when disposed
Example: Standalone usage
```
import { on } from "@needle-tools/engine";

const sub = on(window, "resize", (ev) => {
    // ev is typed as UIEvent
    console.log("resized", ev.target);
});

// Later: clean up
sub.dispose();
```
Example: With autoCleanup in a component
```
import { Behaviour, on } from "@needle-tools/engine";

export class MyComponent extends Behaviour {
    onEnable() {
        this.autoCleanup(on(window, "resize", (ev) => { /* UIEvent */ }));
        this.autoCleanup(on(document, "keydown", (ev) => { /* KeyboardEvent */ }));
        this.autoCleanup(on(this.context.domElement, "click", (ev) => { /* MouseEvent */ }));
    }
    // All listeners removed automatically on disable!
}
```

Function on

Type Parameters

Parameters

Returns IDisposable

Example: Standalone usage

Example: With autoCleanup in a component

Type Parameters

Parameters

Returns IDisposable

Example: Standalone usage

Example: With autoCleanup in a component

Type Parameters

Parameters

Returns IDisposable

Example: Standalone usage

Example: With autoCleanup in a component

Parameters

Returns IDisposable

Example: Standalone usage

Example: With autoCleanup in a component

Settings