Events

From NSB App Studio
Jump to: navigation, search

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
onblur When a control loses focus.
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.
onfocus When a control receives focus.
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. (iOS only)
ongestureend Like ongesturechange, scale and rotation are set. (iOS only)
ongesturestart When two fingers touch the screen. (iOS only)
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.
onrpsize When a control is resized.
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