Gestures

The next type of event supported by mobile devices is a high-level event known as the gesture. Consider gesture events as representing a multitouch change in size or rotation. This is usually performed when the user places two or more fingers on the screen simultaneously and pinches or twists. A twist represents a rotation, while a pinch in or out represents a zoom out or in, respectively. To receive gesture events, your code needs to register one of the handlers shown in Table

Event Handler	Description
ongesturestart	A user has placed multiple fingers on the screen and has begun a movement.
ongesturechange	The user is in the process of moving multiple fingers in a scale or rotation.
ongestureend	The user has completed the scale or rotation by removing fingers.

During the gesture, the event handler is free to check the rotation and scale properties of the corresponding event and update the display accordingly.

Example:

function gestureChange(event)

{

// Retrieve the amount of change in scale caused by the user gesture

// Consider a value of 1.0 to represent the original size, while smaller

// numbers represent a zoom in and larger numbers represent a zoom

// out, based on the ratio of the scale value

var scale = event.scale;

// Retrieve the amount of change in rotation caused by the user gesture

// The rotation value is in degrees from 0 to 360, where positive values

// indicate a rotation clockwise and negative values indicate a counter-

// clockwise rotation

var rotation = event.rotation;

// Update the display based on the rotation.

}

// register our gesture change listener on a document node

node.addEventListener("gesturechange", gestureChange, false);

Gesture events are particularly appropriate in applications that need to manipulate objects or displays, such as in diagramming tools or navigation tools.