Skip to content

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.

1
2
3
4
5
6
7
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():

1
2
3
4
> 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.

Last update: 2021-10-20