UI Events

The events used to handle user interaction with UI elements.

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js

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. An extra "timeout" parameter specifies how long the "target" should be held to allow the handler to execute.

JavaScript
var dxholdHandler = function (event) {
    alert(`The ${event.target.textContent} element is being held for ${event.data.timeout} ms.`);
    return true; // true - continues event propagation, false - stops.
}

DevExpress.events.on(document, "dxhold", "#target", { timeout: 1000 }, dxholdHandler);
// Without extra parameters
// DevExpress.events.on(document, "dxhold", "#target", dxholdHandler);

DevExpress.events.trigger(document.getElementById("target"), "dxhold");

DevExpress.events.off(document, "dxhold", "#target", dxholdHandler);

The following code shows how to perform similar tasks using jQuery, AngularJS, or Knockout:

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); 
// Without extra parameters
// $("#target").on("dxhold", dxholdHandler);

$("#target").trigger("dxhold");

$("#target").off("dxhold", dxholdHandler);

See jQuery documentation for details.

Knockout
HTML
JavaScript
<div id="target" data-bind="dxhold: { execute: dxholdHandler, timeout: 1000 }">
    Target element
</div>
<!-- Without extra parameters -->
<!-- <div id="target" data-bind="dxhold: dxholdHandler">
    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>
<!-- Without extra parameters -->
<!-- <div id="target" dx-hold="dxholdHandler($event)">
    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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. For the information on event handler arguments, refer to the UI Events introduction.

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.

Show Example:
AngularJS
Knockout
jQuery

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. For the information on event handler arguments, refer to the UI Events introduction.

dxdblclick

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

Module: events/dblclick
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. For the information on event handler arguments, refer to the UI Events introduction.

Show Example:
AngularJS
Knockout
jQuery

dxdrag

Raised when the drag gesture has been performed.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
offset:

Number

Indicates which distance has been passed during the dragging gesture, measured as a ratio to the target element's width.

cancel:

Boolean

Indicates whether to prevent the drag gesture. Set this field to true to cancel the gesture.

Show Example:
AngularJS
Knockout
jQuery

dxdragend

Raised when the drag gesture has been completed.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
offset:

Number

Indicates which distance has been passed during the dragging gesture, measured as a ratio to the target element's width.

cancel:

Boolean

Indicates whether to prevent the drag gesture. Set this field to true to cancel the gesture.

Show Example:
AngularJS
Knockout
jQuery

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
draggingElement:

DOM Node

The element which is being dragged.

Show Example:
AngularJS
Knockout
jQuery

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
draggingElement:

DOM Node

The element which is being dragged.

Show Example:
AngularJS
Knockout
jQuery

dxdragstart

Raised when the drag gesture has been started.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Indicates whether to prevent the drag gesture. Set this field to true to cancel the gesture.

Show Example:
AngularJS
Knockout
jQuery

dxdrop

Raised when dragged data has been dropped on the element.

Module: events/drag
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
draggingElement:

DOM Node

The element which is being dragged.

Show Example:
AngularJS
Knockout
jQuery

dxhold

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

Module: events/hold
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. For the information on event handler arguments, refer to the UI Events introduction.

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.

JavaScript
$("#myElement").on("dxhold", { timeout: 1000 }, function() {
    alert("The element is being held during 1000 milliseconds");
});
Show Example:
AngularJS
Knockout
jQuery

dxhoverend

Raised when the mouse pointer leaves the element.

Module: events/hover
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. For the information on event handler arguments, refer to the UI Events introduction.

NOTE
This event requires the mouse pointer, and is hence supported only by desktop browsers.
Show Example:
AngularJS
Knockout
jQuery

dxhoverstart

Raised when the mouse pointer appears over the element.

Module: events/hover
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. For the information on event handler arguments, refer to the UI Events introduction.

NOTE
This event requires the mouse pointer, and is hence supported only by desktop browsers.
Show Example:
AngularJS
Knockout
jQuery

dxpinch

Raised when the pinch gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
scale:

Number

Indicates a scale transformation against the initial scale.

deltaScale:

Number

Indicates a scale transformation against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxpinchend

Raised when the pinch gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
scale:

Number

Indicates a scale transformation against the initial scale.

deltaScale:

Number

Indicates a scale transformation against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxpinchstart

Raised when the pinch gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxpointercancel

Raised when the pointer is no longer likely to produce events.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Specifies the hardware agnostic pointer input type: a mouse, pen or touchscreen.

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.

dxpointerdown

Raised when the pointer takes on the active buttons state.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments refer to the UI Events introduction.

Object structure:
pointerType:

String

Specifies the hardware agnostic pointer input type: a mouse, pen or touchscreen.

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.

Show Example:
AngularJS
Knockout
jQuery

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Indicates the type of the device that caused the event. (Mouse, pen, or touch)

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Indicates the type of the device that caused the event. (Mouse, pen, or touch)

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Specifies the hardware agnostic pointer input type: a mouse, pen or touchscreen.

Show Example:
AngularJS
Knockout
jQuery

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Indicates the type of the device that caused the event. (Mouse, pen, or touch)

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 dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Indicates the type of the device that caused the event. (Mouse, pen, or touch)

dxpointerup

Raised when the pointer loses the active buttons state.

Module: events/pointer
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
pointerType:

String

Specifies the hardware agnostic pointer input type: a mouse, pen or touchscreen.

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.

Show Example:
AngularJS
Knockout
jQuery

dxrotate

Raised when the rotate gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
rotation:

Number

Indicates the rotation angle against the initial position.

deltaRotation:

Number

Indicates the rotation angle against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxrotateend

Raised when the rotate gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
rotation:

Number

Indicates the rotation angle against the initial position.

deltaRotation:

Number

Indicates the rotation angle against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxrotatestart

Raised when the rotate gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxswipe

Raised when the swipe gesture has been performed.

Module: events/swipe
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
offset:

Number

Indicates which distance has been passed during the swipe gesture, measured as a ratio to the target element's width.

cancel:

Boolean

Indicates whether or not to prevent the swipe gesture. Set this field to true to cancel the gesture.

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

Show Example:
AngularJS
Knockout
jQuery

dxswipeend

Raised when the swipe gesture is finished.

Module: events/swipe
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
offset:

Number

Indicates which distance has been passed during the swipe gesture, measured as a ratio to the target element's width.

targetOffset:

Number

Indicates which distance will be passed to completely finish the motion, measured as a ratio to the target element's width.

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

Show Example:
AngularJS
Knockout
jQuery

dxswipestart

Raised when the swipe gesture is started.

Module: events/swipe
Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Indicates whether to prevent the swipe gesture. Set this field to true to cancel the gesture.

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

Show Example:
AngularJS
Knockout
jQuery

dxtransform

Raised when the transform gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
scale:

Number

Indicates a scale transformation against the initial scale.

deltaScale:

Number

Indicates a scale transformation against the last gesture update.

rotation:

Number

Indicates the rotation angle against the initial position.

deltaRotation:

Number

Indicates the rotation angle against the last gesture update.

translation:

Object

Indicates the translation distance against the initial position.

deltaTranslation:

Object

Indicates the translation distance against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxtransformend

Raised when the transform gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
scale:

Number

Indicates a scale transformation against the initial scale.

deltaScale:

Number

Indicates a scale transformation against the last gesture update.

rotation:

Number

Indicates the rotation angle against the initial position.

deltaRotation:

Number

Indicates the rotation angle against the last gesture update.

translation:

Object

Indicates the translation distance against the initial position.

deltaTranslation:

Object

Indicates the translation distance against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxtransformstart

Raised when the transform gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxtranslate

Raised when the translate gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
translation:

Object

Indicates the translation distance against the initial position.

deltaTranslation:

Object

Indicates the translation distance against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxtranslateend

Raised when the translate gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
translation:

Object

Indicates the translation distance against the initial position.

deltaTranslation:

Object

Indicates the translation distance against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxtranslatestart

Raised when the translate gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxzoom

Deprecated

Use the dxpinch instead.

Raised when the zoom gesture has been performed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
scale:

Number

Indicates a scale transformation against the initial scale.

deltaScale:

Number

Indicates a scale transformation against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxzoomend

Deprecated

Use the dxpinchend instead.

Raised when the zoom gesture has been completed.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
scale:

Number

Indicates a scale transformation against the initial scale.

deltaScale:

Number

Indicates a scale transformation against the last gesture update.

cancel:

Boolean

Specifies whether or not to cancel gesture processing.

dxzoomstart

Deprecated

Use the dxpinchstart instead.

Raised when the zoom gesture has been started.

Type:

Event

Function parameters:
event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object. For the information on event handler arguments, refer to the UI Events introduction.

Object structure:
cancel:

Boolean

Specifies whether or not to cancel gesture processing.