All docs
V17.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery 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 });