JavaScript/jQuery UI Events API
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
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
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
<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.`);
}
}See Knockout documentation for details.
AngularJS
<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.`);
}
});dxclick
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.
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.
dxdblclick
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.
dxdrag
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.
dxdragend
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.
dxdragenter
Raised when a user moves the pointer into the element, provided that the drag gesture is being performed.
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.
| Name | Type | Description |
|---|---|---|
| draggingElement |
The element being dragged. |
dxdragleave
Raised when a user moves the pointer out of the element, provided that the drag gesture is being performed.
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.
| Name | Type | Description |
|---|---|---|
| draggingElement |
The element being dragged. |
dxdragstart
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
dxdrop
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.
| Name | Type | Description |
|---|---|---|
| draggingElement |
The element being dragged. |
dxhold
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
<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
<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
<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
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
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
dxhoverstart
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
dxpinch
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.
dxpinchend
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.
dxpinchstart
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
dxpointercancel
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
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
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
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
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
The type of the device that raised 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.
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
The type of the device that raised the event: mouse, pen or touch. |
dxpointermove
Raised when any pointer parameter has been changed. (Position, tilt, pressure, button state, or contact geometry).
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
The type of the device that raised the event: mouse, pen or touch. |
dxpointerout
Raised when a pointer is moved from either the hit test area of an element or one of its descendants.
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
The type of the device that raised the event: mouse, pen or touch. |
dxpointerover
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
The type of the device that raised the event: mouse, pen or touch. |
dxpointerup
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.
| Name | Type | Description |
|---|---|---|
| pointerType |
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
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.
dxrotate
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.
dxrotateend
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.
dxrotatestart
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
dxswipe
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.
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".
See Also
dxswipeend
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.
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".
See Also
dxswipestart
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
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".
See Also
dxtransform
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
|
| deltaRotation |
The rotation angle between the previous and current position. |
|
| deltaScale |
The ratio between the current and previous scales. |
|
| deltaTranslation |
The distance between the previous and current position. |
|
| rotation |
The rotation angle between the initial and current position. |
|
| scale |
The ratio between the current and initial scales. |
|
| translation |
The distance between the initial and current position. |
dxtransformend
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
|
| deltaRotation |
The rotation angle between the initial and previous position. |
|
| deltaScale |
The ratio between the current and previous scales. |
|
| deltaTranslation |
The distance between the previous and current position. |
|
| rotation |
The rotation angle between the initial and current position. |
|
| scale |
The ratio between the current and initial scales. |
|
| translation |
The distance between the initial and current position. |
dxtransformstart
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
dxtranslate
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.
dxtranslateend
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.
dxtranslatestart
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |
dxzoom
Use the dxpinch event instead.
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.
dxzoomend
Use the dxpinchend event instead.
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.
dxzoomstart
Use the dxpinchstart event instead.
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.
| Name | Type | Description |
|---|---|---|
| cancel |
Allows you to cancel the gesture processing. |