166
edits
Canvas event handling: Difference between revisions
Jump to navigation
Jump to search
Add keyboard events
No edit summary |
(Add keyboard events) |
||
| Line 1: | Line 1: | ||
[[ | {{infobox subsystem | ||
|name = Canvas Event Handling | |||
|started = 11/2012 (Available since [[Changelog 2.10|FlightGear 2.10]]) | |||
|description = DOM like event handling | |||
|developers = {{usr|TheTom}} | |||
|folders = | |||
* {{flightgear file|src/Canvas/gui_mgr.hxx}} | |||
* {{simgear file|simgear/canvas}} | |||
}} | |||
{{Template:Canvas Navigation}} | {{Template:Canvas Navigation}} | ||
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. | 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. | 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. For this you should understand how [[Using_Nasal_functions#Function_closures|closures work]]. | ||
= Listen for events = | = Listen for events = | ||
| Line 58: | Line 63: | ||
stopPropagation: func() | stopPropagation: func() | ||
}; | }; | ||
# Since FG 3.1.0 | |||
var DeviceEvent = { | |||
parents: [Event], | |||
# State of all keyboard modifiers at the time the event has | |||
# been triggered [read-only] | |||
modifiers: <modifier-mask>, | |||
# [read-only] | |||
ctrlKey: <was-ctrl-down>, | |||
# [read-only] | |||
shiftKey: <was-shift-down>, | |||
# [read-only] | |||
altKey: <was-alt-down>, | |||
# [read-only] | |||
metaKey: <was-meta-down> | |||
} | |||
# Since FG 3.1.0 | |||
var KeyboardEvent = { | |||
parents: [DeviceEvent], | |||
# [read-only] | |||
key: <key-string>, | |||
# Location of the key on the keyboard [read-only] | |||
# | |||
# https://www.w3.org/TR/DOM-Level-3-Events/#events-keyboard-key-location | |||
# | |||
# 0 standard location | |||
# 1 left | |||
# 2 right | |||
# 3 numpad | |||
location: <key-location>, | |||
# [read-only] | |||
repeat: <is-repeat>, | |||
# [read-only] | |||
charCode: <code>, | |||
# [read-only] | |||
keyCode: <code> | |||
} | |||
var MouseEvent = { | var MouseEvent = { | ||
# [FG >= 3.1.0] | |||
parents: [DeviceEvent], | |||
# [FG < 3.1.0] | |||
parents: [Event], | parents: [Event], | ||
| Line 82: | Line 139: | ||
click_count: <click-count>, | click_count: <click-count>, | ||
# Button which triggered this event [read-only, FG >= 3.1.0] | |||
# Button which triggered this event [read-only] | |||
# | # | ||
# 0: primary button (usually the left button) | # 0: primary button (usually the left button) | ||
| Line 93: | Line 147: | ||
# State of all mouse buttons at the time the event has been | # State of all mouse buttons at the time the event has been | ||
# triggered [read-only] | # triggered [read-only, FG >= 3.1.0] | ||
buttons: <active-button-mask | buttons: <active-button-mask> | ||
}; | }; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 146: | Line 184: | ||
|- | |- | ||
| ''mouseleave'' || Mouse has left the element and all of its children. In contrary to ''mouseout'', ''mouseleave'' is not triggered if the mouse moves from one child element to another, but only if the mouse moves outside the element and all its children. || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave mouseleave] || {{cross}} | | ''mouseleave'' || Mouse has left the element and all of its children. In contrary to ''mouseout'', ''mouseleave'' is not triggered if the mouse moves from one child element to another, but only if the mouse moves outside the element and all its children. || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave mouseleave] || {{cross}} | ||
|- | |||
| ''keydown'' || A key was pressed down. || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown keydown] || {{tick}} | |||
|- | |||
| ''keyup'' || A key was released. || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup keyup] || {{tick}} | |||
|- | |||
| ''keypress'' || A key creating a printable character was pressed. || [http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress keypress] || {{tick}} | |||
|} | |} | ||