Event Handling - JavaScript API

EventKey

This class offers a set of static methods that can be used to determine if some

common keys are being pressed. Internally it compares either the .key property

if it is supported or the value of .which.

require(["EventKey"], function(EventKey) {
  elBySel(".some-input").addEventListener("keydown", function(event) {
    if (EventKey.Enter(event)) {
      // the `Enter` key was pressed
    }
  });
});

ArrowDown(event: KeyboardEvent): boolean

Returns true if the user has pressed the ↓ key.

ArrowLeft(event: KeyboardEvent): boolean

Returns true if the user has pressed the ← key.

ArrowRight(event: KeyboardEvent): boolean

Returns true if the user has pressed the → key.

ArrowUp(event: KeyboardEvent): boolean

Returns true if the user has pressed the ↑ key.

Comma(event: KeyboardEvent): boolean

Returns true if the user has pressed the , key.

Enter(event: KeyboardEvent): boolean

Returns true if the user has pressed the ↲ key.

Escape(event: KeyboardEvent): boolean

Returns true if the user has pressed the Esc key.

Tab(event: KeyboardEvent): boolean

Returns true if the user has pressed the ↹ key.

EventHandler

A synchronous event system based on string identifiers rather than DOM elements,

similar to the PHP event system in WoltLab Suite. Any components can listen to

events or trigger events itself at any time.

Identifiying Events with the Developer Tools

The Developer Tools offer an easy option to identify existing events that are fired while code is being executed.

You can enable this watch mode through your browser's console using Devtools.toggleEventLogging():

> Devtools.toggleEventLogging();
<   Event logging enabled
< [Devtools.EventLogging] Firing event: bar @ com.example.app.foo
< [Devtools.EventLogging] Firing event: baz @ com.example.app.foo

add(identifier: string, action: string, callback: (data: Object) => void): string

Adding an event listeners returns a randomly generated UUIDv4 that is used to

identify the listener. This UUID is required to remove a specific listener through

the remove() method.

fire(identifier: string, action: string, data?: Object)

Triggers an event using an optional data object that is passed to each listener

by reference.

remove(identifier: string, action: string, uuid: string)

Removes a previously registered event listener using the UUID returned by add().

removeAll(identifier: string, action: string)

Removes all event listeners registered for the provided identifier and action.

removeAllBySuffix(identifier: string, suffix: string)

Removes all event listeners for an identifier whose action ends with the value

of suffix.