jQuery/JS Common - utils - events - Methods

This section describes the methods that the DevExpress.events namespace exposes.

off(element, eventName, selector, handler)

Detaches an event handler from the specified elements.

import { off } from "devextreme/events"
Parameters:
element:

DOM Node

|

Array<DOM Node>

An HTML element or an array of elements from which to detach the handler.

eventName:

String

The event name.

selector:

String

A selector that must match the one originally passed to the on() method when attaching the handler.

handler:

Function

A handler to detach.

The following example demonstrates how to detach a handler from the dxhold event for all elements with my-element class:

var dxholdHandler = function() {
    // Process element hold
}
...
DevExpress.events.off(document, "dxhold", ".my-element", dxholdHandler);

on(element, eventName, selector, data, handler)

Attaches an event handler to the specified elements.

import { on } from "devextreme/events"
Parameters:
element:

DOM Node

|

Array<DOM Node>

An HTML element or an array of elements to which to attach the handler.

eventName:

String

The event name.

selector:

String

A selector to filter the element's descendants. If the selector is null or omitted, the event is always triggered on reaching the element.

data:

Object

Data to be passed to the handler in event.data when the event is triggered.

handler:

Function

A function to execute on triggering the event.

The following parameters are passed to the handler function:

  • element
    The HTML element on which the event was triggered.

  • extraParameters
    Additional parameters. See UI Events for details.

The method should return a Boolean value: true to continue, or false to stop the event propagation.

The following example demonstrates how to attach a handler to the dxhold event for all elements with my-element class:

var dxholdHandler = function(element, extraParameters) {
    // Process element hold
    return true;
}
DevExpress.events.on(document, "dxhold", ".my-element", { timeout: 1000 }, dxholdHandler);

one(element, eventName, selector, data, handler)

Attaches an event handler to be executed only once to the specified elements.

import { one } from "devextreme/events"
Parameters:
element:

DOM Node

|

Array<DOM Node>

An HTML element or an array of elements to which to attach the handler.

eventName:

String

The event name.

selector:

String

A selector to filter the element's descendants. If the selector is null or omitted, the event is always triggered on reaching the element.

data:

Object

Data to be passed to the handler in event.data when the event is triggered.

handler:

Function

A function to execute on triggering the event.

The following parameters are passed to the handler function:

  • element
    The HTML element on which the event was triggered.

  • extraParameters
    Additional parameters. See UI Events for details.

The method should return a Boolean value: true to continue, or false to stop the event propagation.

The following example demonstrates how to attach a handler to the dxhold event for all elements with my-element class using the one method.

var dxholdHandler = function(element, extraParameters) {
    // Process element hold
    return true;
}
DevExpress.events.one(document, "dxhold", ".my-element", { timeout: 1000 }, dxholdHandler);

trigger(element, event, extraParameters)

Executes all handlers of a given event type attached to the specified elements.

import { trigger } from "devextreme/events"
Parameters:
element:

DOM Node

|

Array<DOM Node>

An HTML element or an array of elements to which the handlers to execute are attached.

event:

String

|

Event (jQuery or EventObject)

The event or its name.

extraParameters:

Object

Additional parameters to pass to the event handler.

The following code executes all dxhold event handlers of the element with the "myElement" id:

var element = document.getElementById("myElement");
DevExpress.events.trigger(element, "dxhold", { timeout: 1000 });