React Common - Utils - events
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.
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.
on(element, eventName, data, handler)
Data to be passed to the handler. This data is available in the data field of the handler's first parameter.
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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)
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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.
A CSS selector used to filter the element's descendants.
Data to be passed to the handler. This data is available in the data field of the handler's first parameter.
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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)
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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.
Data to be passed to the handler. This data is available in the data field of the handler's first parameter.
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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)
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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.
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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)
The following parameters are passed to the handler:
event: EventObject
The event that caused the handler's execution.extraParameters: Object
Data passed as extraParameters to the trigger(element, event, extraParameters) method when it is called to trigger the event.
// 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, extraParameters)
Triggers an event for the specified elements. Allows you to pass custom parameters to event handlers.
If you have technical questions, please create a support ticket in the DevExpress Support Center.