jQuery/JS Common - Utils - events

HTML elements from which to detach handlers.

eventName:

An event name.

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.

import { off } from "devextreme/common/core/events"

Parameters:

element:

HTML elements from which to detach a handler.

eventName:

An event name.

handler:

The handler to detach.

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.

import { off } from "devextreme/common/core/events"

Parameters:

element:

HTML elements from which to detach handlers.

eventName:

An event name.

selector:

A CSS selector passed to the on method when attaching handlers.

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.

import { off } from "devextreme/common/core/events"

Parameters:

element:

HTML elements from which to detach a handler.

eventName:

An event name.

selector:

A CSS selector passed to the on method when attaching the handler.

handler:

The handler to detach.

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.

import { on } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

data:

Data to be passed to the handler. This data is available in the data field of the handler's first parameter.

handler:

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.

import { on } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

handler:

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", 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.

import { on } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

selector:

A CSS selector used to filter the element's descendants.

data:

Data to be passed to the handler. This data is available in the data field of the handler's first parameter.

handler:

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.

import { on } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

selector:

A CSS selector used to filter the element's descendants.

handler:

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", 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.

import { one } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

data:

Data to be passed to the handler. This data is available in the data field of the handler's first parameter.

handler:

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.

import { one } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

handler:

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", 
    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.

import { one } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

selector:

A CSS selector used to filter the element's descendants.

data:

Data to be passed to a handler in the first parameter's data field.

handler:

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.

import { one } from "devextreme/common/core/events"

Parameters:

element:

HTML elements to which to attach a handler.

eventName:

An event name.

selector:

A CSS selector used to filter the element's descendants.

handler:

A 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", 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.

import { trigger } from "devextreme/common/core/events"

Parameters:

element:

HTML elements for which to trigger an event.

event:

Event (jQuery or EventObject)

An event or its name.

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.

import { trigger } from "devextreme/common/core/events"

Parameters:

element:

HTML elements for which to trigger an event.

event:

Event (jQuery or EventObject)

An event or its name.

extraParameters: