166
edits
Canvas event handling: Difference between revisions
Jump to navigation
Jump to search
Event flow...
(Update info on mouse events.) |
(Event flow...) |
||
| Line 4: | Line 4: | ||
'''Note: This feature is only available in FlightGear versions >= 2.11 !''' | '''Note: This feature is only available in FlightGear versions >= 2.11 !''' | ||
The Canvas event handling system | The Canvas event handling system closely follows the W3C [http://www.w3.org/TR/DOM-Level-3-Events/ DOM Event Model]. If you have already used events in JavaScript and HTML most concepts of the Canvas event system should be already familiar to you. The most notable difference is the missing capture phase, but it is usually not used anyhow. | ||
Listeners - simple Nasal functions - can be attached to every element inside the Canvas and the Canvas itself. Once a certain action - like moving the mouse or pressing a button - occurs the associated listeners are called. We can use this for example to detect whether the mouse has moved over an element or if a certain element has been clicked. | |||
= Listen for events = | = Listen for events = | ||
| Line 29: | Line 31: | ||
my_canvas.addPlacement({"node": "PFD-Screen", "capture-events": 1}); | my_canvas.addPlacement({"node": "PFD-Screen", "capture-events": 1}); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
= Event flow = | |||
Events always are targeted at a specific element inside the Canvas. Before any event handler is called the propagation path for the event is determined. It consists of the event target itself and all its ancestor elements (Groups) up to and including the Canvas. Afterwards - during the ''Target Phase'' - all listeners registered on the event target are called. Finally - during the ''Bubbling Phase'' - the event bubbles up the tree, following the propagation path determined in the first step, and all listeners attached to the according elements are called. | |||
[[File:Canvas Eventflow.png|thumb|540px|center|Event flow of Canvas Events similar to W3C DOM Event flow <ref name="dom-event-flow">DOM Level 3 event flow. http://www.w3.org/TR/DOM-Level-3-Events/#event-flow</ref>.]] | |||
= Event classes = | = Event classes = | ||
| Line 39: | Line 47: | ||
# Target element [read-only] | # Target element [read-only] | ||
target: <target-element>, | target: <target-element>, | ||
# Element the currently called listener is attached to [read-only] | |||
currentTarget: <target-element>, | |||
# Stop further propagation of event (stop | # Stop further propagation of event (stop | ||
| Line 69: | Line 80: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Type !! Description !! DOM equivalent event !! Bubbles <ref | ! Type !! Description !! DOM equivalent event !! Bubbles <ref name="dom-event-flow"/> | ||
|- | |- | ||
| ''mousedown'' || Mouse button pressed || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown mousedown] || {{tick}} | | ''mousedown'' || Mouse button pressed || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown mousedown] || {{tick}} | ||