A newer version of this page is available. Switch to the current version.

events

This namespace provides methods for controlling events without using jQuery.

off(element)

Detaches all handlers from the specified elements.

Module: events
Export: off
Parameters:
element:

DOM Node

|

Array<DOM Node>

HTML elements from which to detach all handlers.

// Modular approach
import { off } from "devextreme/events";
// ...
off(document.getElementById("target"));

// Non-modular approach
DevExpress.events.off(document.getElementById("target"));

off(element, eventName)

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

Module: events
Export: off
Parameters:
element:

DOM Node

|

Array<DOM Node>

HTML elements from which to detach handlers.

eventName:

String

An event name.

// Modular approach
import { off } from "devextreme/events";
// ...
off(document.getElementById("target"), "dxclick");

// Non-modular approach
DevExpress.events.off(document.getElementById("target"), "dxclick");

off(element, eventName, handler)

Detaches an event handler from the specified elements.

Module: events
Export: off
Parameters:
element:

DOM Node

|

Array<DOM Node>

HTML elements from which to detach a handler.

eventName:

String

An event name.

handler:

Function

The handler to detach.

// Modular approach
import { off } from "devextreme/events";
// ...
off(document.getElementById("target"), "dxclick", clickHandler);

// Non-modular approach
DevExpress.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.

Module: events
Export: off
Parameters:
element:

DOM Node

|

Array<DOM Node>

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.

// Modular approach
import { off } from "devextreme/events";
// ...
off(document.getElementById("target"), "dxclick", "#elementID");

// Non-modular approach
DevExpress.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.

Module: events
Export: off
Parameters:
element:

DOM Node

|

Array<DOM Node>

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.

// 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);

on(element, eventName, data, handler)

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

Module: events
Export: on
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

on(element, eventName, handler)

Attaches an event handler to the specified elements.

Module: events
Export: on
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

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

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

Module: events
Export: on
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

on(element, eventName, selector, handler)

Attaches an event handler to the specified elements' descendants.

Module: events
Export: on
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

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.

Module: events
Export: one
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

one(element, eventName, handler)

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

Module: events
Export: one
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

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.

Module: events
Export: one
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

one(element, eventName, selector, handler)

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

Module: events
Export: one
Parameters:
element:

DOM Node

|

Array<DOM Node>

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:

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

trigger(element, event)

Triggers an event for the specified elements.

Module: events
Export: trigger
Parameters:
element:

DOM Node

|

Array<DOM Node>

HTML elements for which to trigger an event.

event:

String

|

Event (jQuery or dxEvent)

An event or its name.

// Modular approach
import { trigger } from "devextreme/events";
// ...
trigger(document.getElementById("target"), "customEvent");

// Non-modular approach
DevExpress.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.

Module: events
Export: trigger
Parameters:
element:

DOM Node

|

Array<DOM Node>

HTML elements for which to trigger an event.

event:

String

|

Event (jQuery or dxEvent)

An event or its name.

extraParameters:

Object

Additional parameters to be passed to event handlers.

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