UI Widgets UI Events

The events used to handle user interaction with UI elements.

When developing an application, you may often need to process a user gesture or another kind of interaction with a certain UI element. PhoneJS suggests UI events for this purpose. You can subscribe to an event of the required element to execute the specified function when the element is swiped, held, clicked, etc. You can use the jQuery, Knockout, or AngularJS approach to subscribe to the required event.

If you use jQuery, you can use standard jQuery facilities to subscribe to and unsubscribe from events.

JavaScript
var myEventHandler = function() {
    alert("The event has been raised");
};
$("#myElement").on("dxclick", myEventHandler);

You can also specify additional event options if the event supports them.

JavaScript
$("#myElement").on("dxhold", { timeout: 1000 }, myEventHandler);

To subscribe to the required event using Knockout, apply one of the following bindings to the element.

HTML
<div id="myElement" data-bind="event: { dxclick: myEventHandler }">
</div>

or

HTML
<div id="myElement" data-bind="dxclick: myEventHandler">
</div>

The Knockout approach accepts the following way to specify additional event options.

HTML
<div id="myElement" data-bind="dxHold: { execute: myEventHandler, timeout: 1000 }">
</div>

AngularJS enables you to subscribe to the event in the following way.

HTML
<div id="myElement" dx-click="myEventHandler($event)">
</div>

In the AngularJS approach, the myEventHandler function should have the $event parameter, which takes on the event object.

The AngularJS approach also enables you to specify additional event options. Use the follwing syntax for this purpose.

HTML
<div id="myElement" dx-click="{ execute: 'myEventHandler($event)', timeout: 1000 }">
</div>

PhoneJS UI events support the jQuery.Event API. An event handling function for some PhoneJS UI events may support some additional parameters described in the required event description.

dxclick

Raises when the element is clicked.

The dxclick event is raised immediately after the element is clicked. Unlike dxclick, the native click event waits 300 ms after the element is clicked or tapped for a second time before raising the dblclick event.

Show Example:
jQuery
<p>Click the yellow element</p>
<div id="myElement" data-bind="event: { dxclick: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The element has been clicked.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxhold

Raises when the element is being held during the specified time.

To specify the time span after which the event is raised, pass an 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:
jQuery
<p>Hold the yellow element</p>
<div id="myElement" data-bind="event: { dxhold: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The element is being held during 750 milliseconds.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxpointercancel

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

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

Raises when the pointer takes on the active buttons state.

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:
jQuery
<p>Click or tap the yellow element</p>
<div id="myElement" data-bind="event: { dxpointerdown: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The pointer has taken on the active buttons state.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxpointermove

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

Show Example:
jQuery
<p>Click or tap the yellow element</p>
<div id="myElement" data-bind="event: { dxpointermove: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("A pointer parameter has been changed.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxpointerup

Raises when the pointer loses the active buttons state.

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:
jQuery
<p>Click or tap the yellow element</p>
<div id="myElement" data-bind="event: { dxpointerup: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The pointer has lost the active buttons state.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxswipe

Raised when the swipe gesture has been performed.

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:
jQuery
<p>Swipe the yellow element</p>
<div id="myElement" data-bind="event: { dxswipe: myEventHandler }"></div>
shown = false;
myEventHandler = function () {
    if (!shown) {
        shown = true;
        DevExpress.ui.dialog.alert("The element has been swiped.", "Event raised")
            .done(function () {
                shown = false
            });
    }
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxswipecancel

Raises when the swipe gesture is cancelled.

To cancel the swipe gesture, assign true to the eventArgs object passed to the dxswipestart event handler.

JavaScript
myEventHandler = function(eventArgs) {
    eventArgs = true;
}
Show Example:
jQuery
<p>Swipe the yellow element</p>
<div id="myElement" data-bind="event: { dxswipestart: swipeStarted, dxswipecancel: myEventHandler }"></div>
swipeStarted = function (model, eventArgs) {
    eventArgs.cancel = true;
};
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The swipe gesture has been canceled.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxswipeend

Raised when the swipe gesture is finished.

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:
jQuery
<p>Swipe the yellow element</p>
<div id="myElement" data-bind="event: { dxswipeend: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The swipe gesture has been finished.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}

dxswipestart

Raised when the swipe gesture is started.

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:
jQuery
<p>Swipe the yellow element</p>
<div id="myElement" data-bind="event: { dxswipestart: myEventHandler }"></div>
myEventHandler = function () {
    DevExpress.ui.dialog.alert("The swipe gesture has been started.", "Event raised");
};
body{
    text-align: center;
}
#myElement{
    margin: 50px;
    padding: 100px;
    background-color: yellow;
    border: 2px solid blue;
    text-align: center;
}
p{
    margin: 10px;
    font-size:larger;
}