Angular Common - Utils - events
This namespace provides methods for controlling events without using jQuery.
off(element)
Detaches all handlers from the specified elements.
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.
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.
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)
Attaches an event handler to the specified elements. Allows you to pass custom data to the handler.
HTML elements to which to attach a handler.
An event name.
Data to be passed to the handler. This data is available in the data field of the handler's first parameter.
The handler to attach.
Return false to stop the event's propagation.
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)
Attaches an event handler to the specified elements.
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.
HTML elements to which to attach a handler.
An event name.
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 handler to attach.
Return false to stop the event's propagation.
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)
Attaches an event handler to the specified elements' descendants.
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.
HTML elements to which to attach a handler.
An event name.
Data to be passed to the handler. This data is available in the data field of the handler's first parameter.
The handler to attach.
Return false to stop the event's propagation.
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)
Attaches an event handler that is executed only once to the specified elements.
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.
HTML elements to which to attach a handler.
An event name.
A CSS selector used to filter the element's descendants.
Data to be passed to a handler in the first parameter's data field.
The handler to attach.
Return false to stop the event's propagation.
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)
Attaches an event handler that is executed only once to the specified elements' descendants.
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)
Triggers an event for the specified elements.
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.