React 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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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/events/index"
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 });