Events
Introduction
Whenever you interact with your browser, you are triggering events. These events are all passed around as objects and are triggered when you perform an action like a click, mouse movement or keystroke
There is a function attached to the ellipse to the left with the following code in it:
function onMouseDown(evt) {
inspect(evt)
}
Notice the name of the function. "onMouseDown" is, obviously, an event triggered when a mouse button is pressed down.
The function itself opens an inspector on the event generated by that event.
Go ahead and click it and look. You'll get an inspector on the event object listing all the properties and functions associated with the onMouseDown event.
It is important to note, however, that this is an augmented event that is unique to Lively. A normal JavaScript event requires more work than you'll see here.
The rectangle has another function attached to it, with the following code in it:
function onMouseDown(evt) {
if (evt.shiftKey == true){
this.setFill(Global.Color.random())
} else {
this.show()
}
}
Notice that the event in the function contains a function that checks to see if the shift key is held down? Try clicking the rectangle with and without the shift key held down and see what happens.
Whenever you interact with your browser, you are triggering events. These events are all passed around as objects and are triggered when you perform an action like a click, mouse movement or keystroke
Try clicking on the objects in the box below. Look how the order of the events are displayed in the log at the bottom. Notice that it starts at the outside and works its way in. (Events in the log at the top are the oldest. If you hold shift and click the log, it will clear it.)
Events - Mouse Down and Mouse Up
Stop Propagation
Events propagate from the top of the scene graph down, but it is possible to stop this.
If, on the parent morph, you send the message 'stopPropagation()' to the event object, it will pass no further down the scene graph.
For example, the rectangle morph has this code in it:
Event Propagation
if (this.get('Propagation').checked){
evt.stopPropagation();
}
That is, if the checkbox is checked, it will stop propagation, if not, it passes unhindered.
Events - Focus and Blur
When an element gains focus, there is an event sent called onFocus. When something else gets focus or focus is removed, there is an event sent called onBlur. Click the objects below to observe how focus and blur behave, still outside in, as before.
Events - Keystrokes
Like mouse events, keyboard events are triggered both on the press and release of the key. These events are onKeyDown and onKeyUp and both receive event objects, the same as other events. In this example, I have also included the 'focus' event, so you can tell where the keystrokes should be delivered.
Events - Stubs
As promised, here are the example event functions discussed in this example. All events take an event object 'evt' as the parameter. This is the event object we had discussed earlier. If you want to know what it contains, a good start is to put the line:
inspect(evt)
into the function and then trigger it.
All of them take the same form:
function onMouseDown(evt){
//Code goes here when event is triggered
}
function onMouseUp(evt){
//Code goes here when event is triggered
}
... and so on.
The other examples discussed were:
onKeyDown - triggered when a key is pressed down
onKeyUp - triggered when a key is released
onFocus - triggered when something is focused
onBlur - triggered when the focus is lost
onLoad - triggered when an object is loaded
Other examples, not discussed here, but taking the same event object as an argument:
onMouseOver - triggered when the mouse passes over an object
onMouseMove - triggered continuously while a mouse is moved
onMouseOut - triggered when the mouse leaves an object
onMouseWheel - triggered when the mouse wheel moves
onDragStart - triggered when an object is dragged further than a given threshold
onDrag - triggered continuously during a drag event
onDragEnd - triggered when a drag event completes
Feel free to play with those by adding them to the morphs below or in another world
100%