Utils: Events | JavaScript UI

Events

All w2ui controls have the same event flow. There are two ways you can add/remove events:

using on"Event" properties
using .on() and .off() methods

The first way is simple, can only be done during object creation and it limits you to a single event listener per event. The second way lets you add multiple event listeners, but can only be called at run-time. It gives you a better control of the event flow. Every widget property that start with "on" is an event.

Properties and Methods

on - function (type, handler)

Adds event listener to the w2ui object.

off - function (type, [handler])

Removes event listener to the w2ui object.

trigger - function (eventData)

Executes all event listeners added with .on() method.

handlers - array of objects

Array of event handlers.

Event Handler Function

When an event is emitted the handler function will receive one argument: event. This argumnet is an object that contains useful information about the event. It has methods that allow you to control the event flow, stop propagation, cancel or execute a function after default processing.

Event handler looks like:

xxxxxxxxxx
 
function (event) {
    // event actions
    console.log(event.detail)
}
​

By default all event handlers are triggered before any action is applied by the widget itself, hence, you can easily cancel event default action by:

xxxxxxxxxx
 
function (event) {
    event.preventDefault(); // cancel event
}
​

You can also define a function that will be executed after the default action is processed is processed. For example:

xxxxxxxxxx
 
function (event) {
    event.done(function () {
        // you can define multiple "done" functions and all will be executed.
    });
}
// since v 2.0 you can do it in asyc way
async function (event) {
    await event.complete
    // after widget defaults
}
​

Events

Properties and Methods

Event Handler Function

User Comments