Events

Function ObjectName_Event[(arglist)]

[statements]

End Function

Description

Events are triggered by actions in a control. They call functions defined in your app. The events described here are common to all controls. Events that are specific to certain controls are discussed in the documentation for that control.

The name of the procedure, ObjectName_Event, is a combination of the object name and the name of event.

When an event occurs, the event object is created with the following elements. Certain events have additional elements. The events object is global: it is also passed as an argument to event functions.

Event Object Elements

Element	Comments
altKey	Was the "ALT" key pressed?
button	Returns which mouse button was clicked
clientX	Horizontal coordinate of the mouse pointer
clientY	Vertical coordinate of the mouse pointer
ctrlKey	Was the "CTRL" key pressed?
identifier	A unique number assigned to each event
metaKey	Was the "meta" key pressed?
relatedTarget	Returns the element related to the element that triggered the event
screenX	Horizontal coordinate of the mouse pointer
screenY	Vertical coordinate of the mouse pointer
shiftKey	Was the "SHIFT" key pressed?
bubbles	Returns whether event is a bubbling event
cancelable	Can an event be cancelled?
currentTarget	Returns element whose event listeners triggered the event
eventPhase	Returns phase of the event flow
target	Returns the element that triggered the event
timeStamp	Returns the time stamp, in milliseconds
type	Returns the name of the event

Here are some of the events that can occur:

Events

Event	Comment
onclick	When a control is clicked on. Not as quick as ontouchstart. Also, on a device with an on screen keyboard, this event opens the keyboard in a Textbox.
ondeviceorientation	When the device is rotated to face in a different direction.
ongesturechange	When the gesture is changed. Additional Event Object Elements are scale, which is the result of a pinch, and rotation, which is the result changing the angle of the fingers.
ongestureend	Like ongesturechange, scale and rotation are set.
ongesturestart	When two fingers touch the screen
onmousedown	When contact is made.
onmousemove	When contact is moved in the control.
onmouseout	When contact leaves the control.
onmouseup	When contact is removed.
onorientationchange	When the device is changed between portrait and landscape.
ontouchstart	When a control is touched.
ontouchend	When a control is no longer touched.
ontouchmove	When a touch moves. Element touches[0] has positioning elements for first finger, [1] for the second. The touches element has elements to describe the touch: touches[0].clientX has the x position of the touch.
onvisibilitychange	When the user switches to a different app or browser page.

Example (Basic)

Rem show scale and rotate with gesture
width = 100
height = 200
rotation = 0
 
Function imgMario_ongesturechange(e)
  node = e.target
  'scale and rotation are relative,
  'so change image when gesture ends
  node.width=(width * e.scale)& "px"
  node.height=(height * e.scale) &"px"
  node.style.webkitTransform="rotate(" & ((rotation+e.rotation) mod 360) & "deg)"
End Function
 
Function imgMario_ongestureend(e)
  'Update the values for next time
  width = width * e.scale
  height = height * e.scale
  rotation = (rotation + e.rotation) mod 360
End Function

Example (JavaScript)

// show scale and rotate with gesture

width = 100;
height = 200;
rotation = 0;

imgMario.ongesturechange = function(e) {
  node = e.target;
  //scale and rotation are relative,
  //so change image when gesture ends
  node.width=(width * e.scale) + "px";
  node.height=(height * e.scale) + "px";
  node.style.webkitTransform="rotate(" + ((rotation+e.rotation*1)%360) + "deg)";
}

imgMario.ongestureend = function(e) {
  //Update the values for next time
  width = width * e.scale;
  height = height * e.scale;
  rotation = (rotation + e.rotation*1)%360;
}

Output

(try this on an iOS device)

Related Items

Properties and Methods