Graphics Reference
In-Depth Information
5.3 Context of Events
For experienced JavaScript programmers, the context in which actual code is ex-
ecuted is an interesting issue. As you can see in the screenshot, the gray shaded
lines above the code contain a function definition. The entire function to listen
to the event (event handler) with our added code looks like this:
function(sym, e) {
// Insert code for mouseclick here
console.log( "First Button was clicked." );
console.debug("sym: ", e);
console.debug("e: ", e);
}
In the function signature, we see that two arguments are passed to the func-
tion. As we already learned,
sym
returns a reference to the actual symbol, which
we can use to change the symbol itself or add more elements. However, the
e argument
refers to the original event object that fired the event. This may
be a
mouseevent-type
jQuery event. The can be useful, for example, in eval-
uating the mouse coordinates for a click. To offer a better understanding of the
two arguments on a test basis, we can also output both variables to the console
in additional logging statements. For a
click
event, the console output looks
like this:
Figure 5.10
The click event in the Google Chrome
console. The properties in blue provide
additional information about coordi-
nates while the red lines refer to possible
additional pressed function keys.
The actual assignment of the above-mentioned functions to the correspond-
ing event of an element looks as follows:
