Events
Function ObjectName_Event[(arglist)]
- [statements]
- [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.
Table 9: Event Object Elements
Element | Comments |
---|---|
altKey | Was the "ALT" key pressed? |
buttontypheight | 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:
Table 10: 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. |
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. |
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. |
Example
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
Output
(try this on an iOS device)