Engine API Reference - v2.22.0-beta.8
    Preparing search index...

    Class Keyboard

    Manages keyboard input by tracking key states and dispatching events. Extends EventHandler in order to fire keydown and keyup events (see KeyboardEvent).

    Allows the state of individual keys to be queried to check if they are currently pressed or were pressed/released since the last update. The class automatically handles browser visibility changes and window blur events by clearing key states. The Keyboard instance must be attached to a DOM element before it can detect key events.

    Key state is derived from the legacy KeyboardEvent.keyCode property. Browsers populate it for real input, but a hand-constructed new KeyboardEvent(...) leaves it at 0, so synthesized events must set keyCode explicitly in order to be observed.

    Keyboard#wasPressed and Keyboard#wasReleased compare against a snapshot taken once per frame, so a keydown and keyup delivered within the same task are seen by neither. Hold the key across at least one frame.

    Your application's Keyboard instance is managed and accessible via AppBase#keyboard.

    For pointer-lock-aware, frame-accumulated input deltas rather than raw events, see KeyboardMouseSource, GamepadSource and MultiTouchSource, which feed InputControllers such as OrbitController, FlyController and FocusController.

    Hierarchy (View Summary)

    Index
    constructor
    preventDefault stopPropagation
    attach detach fire hasEvent isPressed off on once wasPressed wasReleased
    EVENT_KEYDOWN EVENT_KEYUP

    • Create a new Keyboard instance.

      Parameters

      • Optionalelement: Element | Window

        Element to attach Keyboard to. Note that elements like <div> can't accept focus by default. To use keyboard events on an element like this it must have a value of 'tabindex' e.g. tabindex="0". See here for more details.

      • Optionaloptions: { preventDefault?: boolean; stopPropagation?: boolean } = {}

        Optional options object.

        • OptionalpreventDefault?: boolean

          Call preventDefault() in key event handlers. This stops the default action of the event occurring. e.g. Ctrl+T will not open a new browser tab.

        • OptionalstopPropagation?: boolean

          Call stopPropagation() in key event handlers. This stops the event bubbling up the DOM so no parent handlers will be notified of the event.

      Returns Keyboard

      // attach keyboard listeners to the window
      const keyboard = new Keyboard(window);
    preventDefault: boolean

    Call preventDefault() in key event handlers.

    stopPropagation: boolean

    Call stopPropagation() in key event handlers.

    • Attach the keyboard event handlers to an Element.

      Parameters

      • element: Element | Window

        The element to listen for keyboard events on.

      Returns void

    • Detach the keyboard event handlers from the element it is attached to.

      Returns void

    • Fire an event, all additional arguments are passed on to the event listener.

      Parameters

      • name: string

        Name of event to fire.

      • Optionalarg1: any

        First argument that is passed to the event handler.

      • Optionalarg2: any

        Second argument that is passed to the event handler.

      • Optionalarg3: any

        Third argument that is passed to the event handler.

      • Optionalarg4: any

        Fourth argument that is passed to the event handler.

      • Optionalarg5: any

        Fifth argument that is passed to the event handler.

      • Optionalarg6: any

        Sixth argument that is passed to the event handler.

      • Optionalarg7: any

        Seventh argument that is passed to the event handler.

      • Optionalarg8: any

        Eighth argument that is passed to the event handler.

      Returns EventHandler

      Self for chaining.

      obj.fire('test', 'This is the message');

    • Test if there are any handlers bound to an event name.

      Parameters

      • name: string

        The name of the event to test.

      Returns boolean

      True if the object has handlers bound to the specified event name.

      obj.on('test', () => {}); // bind an event to 'test'
      obj.hasEvent('test'); // returns true
      obj.hasEvent('hello'); // returns false

    • Return true if the key is currently down.

      Parameters

      • key: number

        The keyCode of the key to test. See the KEY_* constants.

      Returns boolean

      True if the key was pressed, false if not.

    • Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.

      Use this form to remove all listeners matching a name (and optionally callback/scope). To remove a single known subscription, prefer retaining the EventHandle returned by EventHandler#on / EventHandler#once and calling its EventHandle#off: it removes exactly that subscription and is faster (no scan of the callback list).

      Parameters

      • Optionalname: string

        Name of the event to unbind.

      • Optionalcallback: HandleEventCallback

        Function to be unbound.

      • Optionalscope: any

        Scope that was used as the this when the event is fired.

      Returns EventHandler

      Self for chaining.

      const handler = () => {};
      obj.on('test', handler);

      obj.off(); // Removes all events
      obj.off('test'); // Removes all events called 'test'
      obj.off('test', handler); // Removes all handler functions, called 'test'
      obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this

    • Attach an event handler to an event.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      An event handle. For later removal, prefer retaining this handle and calling its EventHandle#off over EventHandler#off with a name/callback: it removes exactly this subscription and is faster (no scan of the callback list).

      obj.on('test', (a, b) => {
          console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console

      // preferred removal: retain the handle and call off() on it
      const evt = obj.on('test', (a, b) => {
          console.log(a + b);
      });
      // some time later
      evt.off();

    • Attach an event handler to an event. This handler will be removed after being fired once.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      An event handle. For removal before it fires, prefer retaining this handle and calling its EventHandle#off over EventHandler#off with a name/callback: it removes exactly this subscription and is faster (no scan of the callback list).

      obj.once('test', (a, b) => {
          console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console
      obj.fire('test', 1, 2); // not going to get handled

    • Returns true if the key was pressed since the last update.

      Parameters

      • key: number

        The keyCode of the key to test. See the KEY_* constants.

      Returns boolean

      True if the key was pressed.

    • Returns true if the key was released since the last update.

      Parameters

      • key: number

        The keyCode of the key to test. See the KEY_* constants.

      Returns boolean

      True if the key was pressed.

    EVENT_KEYDOWN: string = 'keydown'

    Fired when a key is pressed. The handler is passed a KeyboardEvent.

    const onKeyDown = (e) => {
        if (e.key === KEY_SPACE) {
            // space key pressed
        }
        e.event.preventDefault(); // Use original browser event to prevent browser action.
    };

    app.keyboard.on('keydown', onKeyDown, this);
    EVENT_KEYUP: string = 'keyup'

    Fired when a key is released. The handler is passed a KeyboardEvent.

    const onKeyUp = (e) => {
        if (e.key === KEY_SPACE) {
            // space key released
        }
        e.event.preventDefault(); // Use original browser event to prevent browser action.
    };

    app.keyboard.on('keyup', onKeyUp, this);

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods
    Events