Event: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
JwellsNB (talk | contribs)
Add javascript snippet
JwellsNB (talk | contribs)
Line 129: Line 129:


You can set an event for an element as follows:
You can set an event for an element as follows:
<pre>  document.onmousedown=bodyMouseDown</pre>
<pre>  document.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:
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>
<pre>
   function bodyMouseDown() {
   function bodyMouseDown() {
     xPos = event.screenX
     xPos = event.screenX;
     yPos = event.screenY
     yPos = event.screenY;
     alert(xPos + " left " + yPos + " down")
     alert(xPos + " left " + yPos + " down");
   }
   }
</pre>
</pre>

Revision as of 18:08, 19 May 2013

NSB/App Studio 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 }

event properties

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.

Example (Basic)

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

Example (JavaScript)

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(xPos + " left " + yPos + " down");
  }