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

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

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

dxpointermove

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

Show Example:
jQuery

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

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

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

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

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