Graphics Reference
In-Depth Information
We now start the composition in the browser and activate the debugging
console (Windows: Ctrl+Shift+J, OS X: Cmd+Alt+J). The console will give infor-
mation about the occurrence of every event every time an element is clicked.
To complete the previous example, we add two additional actions: one for the
click
event of the second button and one for the
compositionReady
event
of the Stage itself. Through this procedure, you can make sure that the interre-
lations between all your elements work together behind the scenes before you
add more complex actions.
5.2.2 User Events
Now let's take a look at which user events are available to receive instructions
from the user, via the mouse, keyboard, or even a touch screen.
For all elements, the following mouse events are available:
click •
This event is fired as soon as the user clicks on the element.
dblclick •
Similar to
click
, only in this case, a double-click is the event trigger.
mouseover •
This event fires as soon as the mouse pointer touches or hovers
over the particular element. For this event, you must be aware that it is also
activated when a child element is entered within the outer element. This can
cause unexpected results and is not suitable for elements such as buttons
with multiple levels (e.g., base level and text level). For such cases, use the
mouseenter
event.
mouseout •
Opposite to
mouseover
, this event fires as soon as the mouse
leaves the element. The same problems that occur with
mouseover
can also
happen with this event. To avoid this, you can use the
mouseleave
event.
mouseenter •
This event fires once when the mouse enters an element, and
then again when the mouse has actually left the surface area of the element.
Child elements do not affect this event.
mouseleave •
Similar to
mouseenter
, this event is executed once when the
mouse leaves an element. Child elements are also not involved in this event.
mousedown and mouseup •
When a simple click is not enough because you
want to handle the click process in individual phases, these two events are
the right solution.
mousedown
is fired as soon as the mouse button is pressed
while
mouseup
executes when the mouse button is released. The exact order
of a click process is as follows:
mousedown >>> mouseup >>> click
.
mousemove •
This event runs continuously while the mouse moves
over an element. In the console, the following logging statement
console.log(e.offsetX+” / “+e.offsetY)
gives a live report of the
mouse's current coordinates relative to the upper left corner of the involved
element.
