Angular Common - Utils - events
off(element)
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)
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)
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.
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.
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)
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.
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)
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.
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.
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.
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)
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.
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.
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.
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)
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.
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.
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.
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)
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.
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)
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.
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 });
If you have technical questions, please create a support ticket in the DevExpress Support Center.