Vue UI Events API

The events used to handle user interaction with UI elements.

DevExtreme provides UI events for processing a user's interaction with a specific UI element. The DevExpress.events namespace exposes an API to work with the UI events.

The following code shows how to attach, trigger and then detach a dxhold event handler from a page element with the target ID. The timeout parameter specifies how long the target should be held to allow the handler to execute:

jQuery
JavaScript
var dxholdHandler = function(jQueryEvent) {
    alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
};

$("#target").on("dxhold", { timeout: 1000 }, dxholdHandler); 
$("#target").trigger("dxhold");
$("#target").off("dxhold", dxholdHandler);

See jQuery documentation for details.

Angular
JavaScript
import { on, trigger, off } from "devextreme/events";
// ...
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`The ${event.target.textContent} element is being held for ${event.data.timeout} ms.`);
            return true; // true - continues event propagation, false - stops
        }
        const target: HTMLElement = document.getElementById("target");

        on(target, "dxhold", { timeout: 1000 }, dxholdHandler);
        trigger(target, "dxhold");
        off(target, "dxhold", dxholdHandler);
    }
}
Knockout
HTML
JavaScript
<div id="target" data-bind="dxhold: { execute: dxholdHandler, timeout: 1000 }">
    Target element
</div>
var viewModel = {
    dxholdHandler: function(viewModel, jQueryEvent) {
        alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
    }
}
NOTE
Knockout does not provide an API to unsubscribe from an event.

See Knockout documentation for details.

AngularJS
HTML
JavaScript
<div id="target" dx-hold="{ execute: 'dxholdHandler($event)', timeout: 1000 }">
    Target element
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.dxholdHandler = function(jQueryEvent) {
            alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
        }
    });
NOTE
AngularJS does not provide an API to unsubscribe from an event.

dxclick

Raised when the element is clicked.

Module: events/click
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

The native click event waits 300 ms after the element was clicked. This time interval is required to wait for the second click. If a user clicks the element one more time during this time span, the dblclick event is raised instead of the click. The dxclick event is raised immediately after the element is clicked.

See Also

dxcontextmenu

Raised when the right mouse button is clicked on the element or when the element is held during a specified time period.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

See Also

dxdblclick

Raised when a user has performed a double click on the element.

Module: events/dblclick
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

See Also

dxdrag

Raised when the drag gesture has been performed.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
offset

Number

The ratio between the drag distance and the target element's width.

See Also

dxdragend

Raised when the drag gesture has been completed.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
offset

Number

The ratio between the drag distance and the target element's width.

See Also

dxdragenter

Raised when a user moves the pointer into the element, provided that the drag gesture is being performed.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
draggingElement

Element

The element being dragged.

See Also

dxdragleave

Raised when a user moves the pointer out of the element, provided that the drag gesture is being performed.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
draggingElement

Element

The element being dragged.

See Also

dxdragstart

Raised when the drag gesture has been started.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

See Also

dxdrop

Raised when dragged data has been dropped on the element.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
draggingElement

Element

The element being dragged.

See Also

dxhold

Raised when the element is being held during a specified time.

Module: events/hold
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

To specify the time span after which the event is raised, pass the object containing the timeout property to the function subscribing to the event.

If you need to subscribe to dxhold for two elements that are in the parent-child relationship, make sure that the timeout of the parent element is equal or longer than that of the child. The following example illustrates the case when the parent's timeout is longer:

jQuery
index.html
index.js
index.css
<div id="parent">
    Parent element
    <div id="child">
        Child element
    </div>
</div>
$(function() {
    var dxholdHandler = function() {
        alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
        return true; // true - continues event propagation, false - stops
    });

    $("#parent").on("dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
    $("#child").on("dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
});
#parent {
    background-color: aquamarine;
    width: 250px;
    height: 150px;
}

#child {
    background-color: bisque;
    width: 180px;
    height: 100px;
}
Angular
app.component.html
app.component.ts
app.component.css
<div id="parent">
    Parent element
    <div id="child">
        Child element
    </div>
</div>
import { Component, AfterViewInit } from '@angular/core';
import { on } from 'devextreme/events';
import 'devextreme/events/hold';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
            return true; // true - continues event propagation, false - stops
        }
        const parent: HTMLElement = document.getElementById("parent");
        const child: HTMLElement = document.getElementById("child");

        on(parent, "dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
        on(child, "dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
    }
}
#parent {
    background-color: aquamarine;
    width: 250px;
    height: 150px;
}

#child {
    background-color: bisque;
    width: 180px;
    height: 100px;
}
Vue
App.vue
<template>
<div id="parent">
    Parent element
    <div id="child">
        Child element
    </div>
</div>
</template>

<script>
import { on } from 'devextreme/events';
import 'devextreme/events/hold';

export default {
    mounted() {
        const dxholdHandler = (event) => {
            alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
            return false; // true - continues event propagation, false - stops
        }
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        on(parent, "dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
        on(child, "dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
    }
};
</script>

<style>
#parent {
    background-color: aquamarine;
    width: 250px;
    height: 150px;
}
#child {
    background-color: bisque;
    width: 180px;
    height: 100px;
}
</style>
React
App.js
import React from 'react';
import { on } from 'devextreme/events';
import 'devextreme/events/hold';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

let parentStyle = {
    backgroundColor: "aquamarine",
    width: 250,
    height: 150
};

let childStyle = {
    backgroundColor: "bisque",
    width: 180,
    height: 100
};

class App extends React.Component {
    componentDidMount() {
        const dxholdHandler = (event) => {
        alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
        return true; // true - continues event propagation, false - stops
        }
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        on(parent, "dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
        on(child, "dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
    }

    render() {
        return (
            <div id="parent" style={parentStyle}>
                Parent element
                <div id="child" style={childStyle}>
                    Child element
                </div>
            </div>
        )
    }
}

export default App;
See Also

dxhoverend

Raised when the mouse pointer leaves the element.

Module: events/hover
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

NOTE
This event requires the mouse pointer, and is hence supported only by desktop browsers.
See Also

dxhoverstart

Raised when the mouse pointer appears over the element.

Module: events/hover
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

NOTE
This event requires the mouse pointer, and is hence supported only by desktop browsers.
See Also

dxpinch

Raised when the pinch gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaScale

Number

The ratio between the current and previous scales.
scale

Number

The ratio between the current and initial scales.

See Also

dxpinchend

Raised when the pinch gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaScale

Number

The ratio between the current and previous scales.
scale

Number

The ratio between the current and initial scales.

See Also

dxpinchstart

Raised when the pinch gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

See Also

dxpointercancel

Raised when the browser decides that the pointer is unlikely to produce any more events.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

The event can be raised because of a hardware event; such as, if a device changes the screen orientation while the pointer is active or the number of simultaneous pointers exceeds the supported number, etc.

See Also

dxpointerdown

Raised when the pointer takes on the active buttons state.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

For a mouse pointer, this event is raised when the mouse state changes from no buttons pressed to at least one button pressed. For touch and pen pointers, the event is raised when physical contact is made with the digitizer.

See Also

dxpointerenter

Raised when a pointer is moved to either the hit test area of an element or one of its descendants.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

See Also

dxpointerleave

Raised when a pointer is moved from either the hit test area of an element or one of its descendants.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

See Also

dxpointermove

Raised when any pointer parameter has been changed. (Position, tilt, pressure, button state, or contact geometry).

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

See Also

dxpointerout

Raised when a pointer is moved from either the hit test area of an element or one of its descendants.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

See Also

dxpointerover

Raised when a pointer is moved to the hit test area of an element or one of its descendants.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

See Also

dxpointerup

Raised when the pointer loses the active buttons state.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
pointerType

String

The type of the device that raised the event: mouse, pen or touch.

For a mouse pointer, this event is raised when the mouse state changes from at least one button pressed to no buttons pressed. For touch and pen pointers, the event is raised when physical contact is removed from the digitizer.

See Also

dxremove

Raised when a UI component associated with an element is being removed from the DOM.

Module: events/remove
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

See Also

dxrotate

Raised when the rotate gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaRotation

Number

The rotation angle between the previous and current position.
rotation

Number

The rotation angle between the initial and current position.

See Also

dxrotateend

Raised when the rotate gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaRotation

Number

The rotation angle between the previous and current position.
rotation

Number

The rotation angle between the initial and current position.

See Also

dxrotatestart

Raised when the rotate gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

See Also

dxswipe

Raised when the swipe gesture has been performed.

Module: events/swipe
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
offset

Number

The ratio between the swipe distance and the target element's width or height.

The event supports the direction property that specifies whether the event is raised for horizontal or vertical scrolling. The property can take on the "vertical" and "horizontal" values. The default property value is "horizontal".

See Also

dxswipeend

Raised when the swipe gesture is finished.

Module: events/swipe
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
offset

Number

The ratio between the swipe distance and the target element's width or height.
targetOffset

Number

The ratio between the distance that should be passed to finish the motion and the target element's width or height.

The event supports the direction property, which specifies whether the event is raised for horizontal or vertical scrolling. The property can take on the "vertical" and "horizontal" values. The default property value is "horizontal".

See Also

dxswipestart

Raised when the swipe gesture is started.

Module: events/swipe
Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

The event supports the direction property, which specifies whether the event is raised for horizontal or vertical scrolling. The property can take on the "vertical" and "horizontal" values. The default property value is "horizontal".

See Also

dxtransform

Raised when the transform gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaRotation

Number

The rotation angle between the previous and current position.
deltaScale

Number

The ratio between the current and previous scales.
deltaTranslation

Object

The distance between the previous and current position.
rotation

Number

The rotation angle between the initial and current position.
scale

Number

The ratio between the current and initial scales.
translation

Object

The distance between the initial and current position.

See Also

dxtransformend

Raised when the transform gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaRotation

Number

The rotation angle between the initial and previous position.
deltaScale

Number

The ratio between the current and previous scales.
deltaTranslation

Object

The distance between the previous and current position.
rotation

Number

The rotation angle between the initial and current position.
scale

Number

The ratio between the current and initial scales.
translation

Object

The distance between the initial and current position.

See Also

dxtransformstart

Raised when the transform gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

See Also

dxtranslate

Raised when the translate gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaTranslation

Object

The distance between the previous and current position.
translation

Object

The distance between the initial and current position.

See Also

dxtranslateend

Raised when the translate gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaTranslation

Object

The distance between the previous and current position.
translation

Object

The distance between the initial and current position.

See Also

dxtranslatestart

Raised when the translate gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

See Also

dxzoom Deprecated

Use the dxpinch event instead.

Raised when the zoom gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaScale

Number

The ratio between the current and previous scales.
scale

Number

The ratio between the current and initial scales.

See Also

dxzoomend Deprecated

Use the dxpinchend event instead.

Raised when the zoom gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.
deltaScale

Number

The ratio between the current and previous scales.
scale

Number

The ratio between the current and initial scales.

See Also

dxzoomstart Deprecated

Use the dxpinchstart event instead.

Raised when the zoom gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture processing.

See Also