Vue 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"
Parameters:
element:

Element

|

Array<Element>

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.

import { off } from "devextreme/events"
Parameters:
element:

Element

|

Array<Element>

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.

import { off } from "devextreme/events"
Parameters:
element:

Element

|

Array<Element>

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.

import { off } from "devextreme/events"
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.

  • // 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.

import { off } from "devextreme/events"
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.

  • // 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.

import { on } from "devextreme/events"
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:

  • // 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.

import { on } from "devextreme/events"
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:

  • // 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.

import { on } from "devextreme/events"
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:

  • // 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.

import { on } from "devextreme/events"
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:

  • // 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.

import { one } from "devextreme/events"
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:

  • // 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.

import { one } from "devextreme/events"
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:

  • // 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.

import { one } from "devextreme/events"
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:

  • // 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.

import { one } from "devextreme/events"
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:

  • // 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.

import { trigger } from "devextreme/events"
Parameters:
element:

Element

|

Array<Element>

HTML elements for which to trigger an event.

event:

String

|

Event (jQuery or EventObject)

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.

import { trigger } from "devextreme/events"
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.

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