jQuery/JS Common - Utils - events

This namespace provides methods for controlling events without using jQuery.

off(element)

Detaches all handlers from the specified elements.

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

Element

|

Array<Element>

HTML elements from which to detach all handlers.

jQuery
// Modular approach import { off } from "devextreme/events"; // ... off(document.getElementById("target")); // Non-modular approach DevExpress.events.off(document.getElementById("target"));
Angular
import { off } from "devextreme/events"; // ... off(document.getElementById("target"));
Vue
import { off } from "devextreme/events"; // ... off(document.getElementById("target"));
React
import { off } from "devextreme/events"; // ... off(document.getElementById("target"));

off(element, eventName)

Detaches all handlers of the specified event from the specified elements.

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

Element

|

Array<Element>

HTML elements from which to detach handlers.

eventName:

String

An event name.

jQuery
// Modular approach import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick"); // Non-modular approach DevExpress.events.off(document.getElementById("target"), "dxclick");
Angular
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick");
Vue
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick");
React
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick");

off(element, eventName, handler)

Detaches an event handler from the specified elements.

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

Element

|

Array<Element>

HTML elements from which to detach a handler.

eventName:

String

An event name.

handler:

Function

The handler to detach.

jQuery
// Modular approach import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", clickHandler); // Non-modular approach DevExpress.events.off(document.getElementById("target"), "dxclick", clickHandler);
Angular
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", clickHandler);
Vue
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", clickHandler);
React
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", clickHandler);

off(element, eventName, selector)

Detaches all event handlers of the specified type attached using the on(element, eventName, selector, data, handler) or on(element, eventName, selector, handler) method.

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

Element

|

Array<Element>

HTML elements from which to detach handlers.

eventName:

String

An event name.

selector:

String

A CSS selector passed to the on method when attaching handlers.

jQuery
// Modular approach import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID"); // Non-modular approach DevExpress.events.off(document.getElementById("target"), "dxclick", "#elementID");
Angular
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID");
Vue
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID");
React
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID");

off(element, eventName, selector, handler)

Detaches the specified event handler attached using the on(element, eventName, selector, data, handler) or on(element, eventName, selector, handler) method.

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

Element

|

Array<Element>

HTML elements from which to detach a handler.

eventName:

String

An event name.

selector:

String

A CSS selector passed to the on method when attaching the handler.

handler:

Function

The handler to detach.

jQuery
// Modular approach import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID", clickHandler); // Non-modular approach DevExpress.events.off(document.getElementById("target"), "dxclick", "#elementID", clickHandler);
Angular
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID", clickHandler);
Vue
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID", clickHandler);
React
import { off } from "devextreme/events"; // ... off(document.getElementById("target"), "dxclick", "#elementID", clickHandler);

on(element, eventName, data, handler)

Attaches an event handler to the specified elements. Allows you to pass custom data to the handler.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

data:

Object

Data to be passed to the handler. This data is available in the data field of the handler's first parameter.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } ); // Non-modular approach DevExpress.events.on( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Angular
import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Vue
import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
React
import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );

on(element, eventName, handler)

Attaches an event handler to the specified elements.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here }); // Non-modular approach DevExpress.events.on(document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here });
Angular
import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here });
Vue
import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here });
React
import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here });

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

Attaches an event handler to the specified elements' descendants. Allows you to pass custom data to the handler.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

selector:

String

A CSS selector used to filter the element's descendants.

data:

Object

Data to be passed to the handler. This data is available in the data field of the handler's first parameter.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } ); // Non-modular approach DevExpress.events.on( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Angular
import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Vue
import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
React
import { on } from "devextreme/events"; // ... on( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );

on(element, eventName, selector, handler)

Attaches an event handler to the specified elements' descendants.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

selector:

String

A CSS selector used to filter the element's descendants.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here }); // Non-modular approach DevExpress.events.on(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });
Angular
import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });
Vue
import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });
React
import { on } from "devextreme/events"; // ... on(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });

one(element, eventName, data, handler)

Attaches an event handler that is executed only once to the specified elements. Allows you to pass custom data to the handler.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

data:

Object

Data to be passed to the handler. This data is available in the data field of the handler's first parameter.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } ); // Non-modular approach DevExpress.events.one( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Angular
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Vue
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
React
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );

one(element, eventName, handler)

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

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here } ); // Non-modular approach DevExpress.events.one( document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here } );
Angular
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here } );
Vue
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here } );
React
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", function (event, extraParameters) { // Your code goes here } );

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

Attaches an event handler that is executed only once to the specified elements' descendants. Allows you to pass custom data to the handler.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

selector:

String

A CSS selector used to filter the element's descendants.

data:

Object

Data to be passed to a handler in the first parameter's data field.

handler:

Function

The handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } ); // Non-modular approach DevExpress.events.one( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Angular
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
Vue
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );
React
import { one } from "devextreme/events"; // ... one( document.getElementById("target"), "dxclick", "#elementID", { value: "value1" }, function (event, extraParameters) { console.log(event.data.value); // Outputs "value1" } );

one(element, eventName, selector, handler)

Attaches an event handler that is executed only once to the specified elements' descendants.

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

Element

|

Array<Element>

HTML elements to which to attach a handler.

eventName:

String

An event name.

selector:

String

A CSS selector used to filter the element's descendants.

handler:

Function

A handler to attach.
Return false to stop the event's propagation.

The following parameters are passed to the handler:

jQuery
// Modular approach import { one } from "devextreme/events"; // ... one(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here }); // Non-modular approach DevExpress.events.one(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });
Angular
import { one } from "devextreme/events"; // ... one(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });
Vue
import { one } from "devextreme/events"; // ... one(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });
React
import { one } from "devextreme/events"; // ... one(document.getElementById("target"), "dxclick", "#elementID", function (event, extraParameters) { // Your code goes here });

trigger(element, event)

Triggers an event for the specified elements.

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

Element

|

Array<Element>

HTML elements for which to trigger an event.

event:

String

|

Event (jQuery or EventObject)

An event or its name.

jQuery
// Modular approach import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent"); // Non-modular approach DevExpress.events.trigger(document.getElementById("target"), "customEvent");
Angular
import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent");
Vue
import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent");
React
import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent");

trigger(element, event, extraParameters)

Triggers an event for the specified elements. Allows you to pass custom parameters to event handlers.

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

Element

|

Array<Element>

HTML elements for which to trigger an event.

event:

String

|

Event (jQuery or EventObject)

An event or its name.

extraParameters:

Object

Additional parameters to be passed to event handlers.

jQuery
// Modular approach import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent", { timeout: 1000 }); // Non-modular approach DevExpress.events.trigger(document.getElementById("target"), "customEvent", { timeout: 1000 });
Angular
import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent", { timeout: 1000 });
Vue
import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent", { timeout: 1000 });
React
import { trigger } from "devextreme/events"; // ... trigger(document.getElementById("target"), "customEvent", { timeout: 1000 });