Event: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
JwellsNB (talk | contribs)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
NSB/App Studio programs run within a special version of a web browser.  
AppStudio programs run within a special version of a web browser.  
As a result, they can inherit a lot of the properties of the environment they run in.  
As a result, they can inherit a lot of the properties of the environment they run in.  
You can access these properties from within your app.
You can access these properties from within your app.
Line 18: Line 18:




'''list of events'''
'''List of events'''


{| class="wikitable"
{| class="wikitable"
Line 54: Line 54:
|onselect || Text is selected
|onselect || Text is selected
|-
|-
|onunload || The user exits the page|}
|onunload || The user exits the page
|}
|}


Line 60: Line 60:


{| class="wikitable"
{| class="wikitable"
|-
|acceleration|| The acceleration that the user is giving to the device. Acceleration data are expressed in m/s^2. <br>
acceleration.x<br>
acceleration.y<br>
acceleration.z
|-
|accelerationIncludingGravity|| The acceleration that the user is giving to the device including gravity. Acceleration data are expressed in m/s^2. <br>
accelerationIncludingGravity.x<br>
accelerationIncludingGravity.y<br>
accelerationIncludingGravity.z
|-
|-
|altKey || Returns whether or not the &quot;ALT&quot; key was pressed when an event was triggered
|altKey || Returns whether or not the &quot;ALT&quot; key was pressed when an event was triggered
Line 112: Line 122:
|-
|-
|touches[n].target || The target of this touch.
|touches[n].target || The target of this touch.
|-
| webkitCompassHeading || The current compass reading in degrees (0-359)
|}
|}


== Example (Basic) ==
== Example ==
 
You can set an event for an element as follows:
You can set an event for an element as follows:
<pre>  document.body.onmousedown=bodyMouseDown</pre>
When there is a click anywhere in the body, the function bodyMouseDown will be called in your program. You can then examine the event object to find out more information:
<pre>
  Function bodyMouseDown()
    MsgBox event.type & " at " & event.clientX & "," & event.clientY
  End Function
</pre>


== Example (JavaScript) ==
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
document.onmousedown=bodyMouseDown;


You can set an event for an element as follows:
// When there is a click anywhere in the body,
<pre>  document.onmousedown=bodyMouseDown;</pre>
// the function bodyMouseDown will be called in your program.  
When there is a click anywhere in the body, the function bodyMouseDown will be called in your program. You can then examine the event object to find out more information:
// You can then examine the event object to find out more information:
function bodyMouseDown() {
  xPos = event.screenX;
  yPos = event.screenY;
  alert(event.type + " at " + xPos + "," + yPos);
}
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
document.body.onmousedown=bodyMouseDown


<pre>
' When there is a click anywhere in the body,
  function bodyMouseDown() {
' the function bodyMouseDown will be called in your program.  
    xPos = event.screenX;
' You can then examine the event object to find out more information:
    yPos = event.screenY;
    alert(xPos + " left " + yPos + " down");
  }
</pre>


Function bodyMouseDown()
  MsgBox event.type & " at " & event.clientX & "," & event.clientY
End Function
</syntaxhighlight>
</tabber>


[[Category:Language Reference]]
[[Category:Language Reference]]


[[Category:Objects]]
[[Category:Objects]]

Latest revision as of 14:38, 24 July 2019

AppStudio programs run within a special version of a web browser. As a result, they can inherit a lot of the properties of the environment they run in. You can access these properties from within your app.

It is not a complete list: there are additional items in the full HTML documentation. In addition, some browsers may have additional members not shown here.

The event object gets created when an event occurs in your program. Events are usually the result of some interaction on the screen by the user: a click, a mouse move or a field selected. You can assign the name of a function in your program to each of these events. In your function, you can examine the values in the Event object to find out more about what just happened.

You can set an event for an element as follows:

  document.body.onmousedown=bodyMouseDown

When there is a click anywhere in the body, the function bodyMouseDown will be called in your program. You can then examine the event object to find out more information:

  Function bodyMouseDown()
    MsgBox event.type & " at " & event.clientX & "," & event.clientY
  End Function


List of events

onblur An element loses focus
onchange The content of a field changes
onclick Mouse clicks an object
ondblclick Mouse double-clicks an object
onerror An error occurs when loading a document or an image
onfocus An element gets focus
onkeydown
onkeypress A keyboard key is pressed or held down
onkeyup A keyboard key is released
onmousedown A mouse button is pressed
onmousemove The mouse is moved
onmouseout The mouse is moved off an element
onmouseover The mouse is moved over an element
onmouseup A mouse button is released
onresize A window or frame is resized
onselect Text is selected
onunload The user exits the page

event properties

acceleration The acceleration that the user is giving to the device. Acceleration data are expressed in m/s^2.

acceleration.x
acceleration.y
acceleration.z

accelerationIncludingGravity The acceleration that the user is giving to the device including gravity. Acceleration data are expressed in m/s^2.

accelerationIncludingGravity.x
accelerationIncludingGravity.y
accelerationIncludingGravity.z

altKey Returns whether or not the "ALT" key was pressed when an event was triggered
button Returns which mouse button was clicked when an event was triggered
clientX Returns the horizontal coordinate of the mouse pointer when an event was triggered
clientY Returns the vertical coordinate of the mouse pointer when an event was triggered
ctrlKey Returns whether or not the "CTRL" key was pressed when an event was triggered
keyCode Returns the number of the key that was pressed.
metaKey Returns whether or not the "meta" key was pressed when an event was triggered
relatedTarget Returns the element related to the element that triggered the event
screenX Returns the horizontal coordinate of the mouse pointer when an event was triggered
screenY Returns the vertical coordinate of the mouse pointer when an event was triggered
shiftKey Returns whether or not the "SHIFT" key was pressed when an event was triggered
bubbles Returns a Boolean value that indicates whether or not an event is a bubbling event
cancelable Returns whether or not an event can have its default action prevented
currentTarget Returns the element whose event listeners triggered the event
eventPhase Returns which phase of the event flow is currently being evaluated
target Returns the element that triggered the event
timeStamp Returns the time stamp, in milliseconds, from the epoch (system start or event trigger)
type Returns the name of the event
touches[n].clientX The x-coordinate of the touch’s location relative to the window’s viewport.
touches[n].clientY The y-coordinate of the touch’s location relative to the window’s viewport.
touches[n].identifier The unique identifier for this touch object.
touches[n].pageX The x-coordinate of the touch’s location in page coordinates.
touches[n].pageY The y-coordinate of the touch’s location in page coordinates.
touches[n].screenX The x-coordinate of the touch’s location in screen coordinates.
touches[n].screenY The y-coordinate of the touch’s location in screen coordinates.
touches[n].target The target of this touch.
webkitCompassHeading The current compass reading in degrees (0-359)

Example

You can set an event for an element as follows:

document.onmousedown=bodyMouseDown;

// When there is a click anywhere in the body,
// the function bodyMouseDown will be called in your program. 
// You can then examine the event object to find out more information:
function bodyMouseDown() {
  xPos = event.screenX;
  yPos = event.screenY;
  alert(event.type + " at " + xPos + "," + yPos);
}

document.body.onmousedown=bodyMouseDown

' When there is a click anywhere in the body, 
' the function bodyMouseDown will be called in your program. 
' You can then examine the event object to find out more information:

Function bodyMouseDown()
  MsgBox event.type & " at " & event.clientX & "," & event.clientY
End Function