onEvent

Category:UI Controls

Interactive apps need both UI elements button, textInput, textLabel, dropdown, checkbox, radioButton, image, and event handlers for those UI elements and each type of user interaction needed. The UI element, with unique id, must exist before the onEvent function can be used.

Event Type Description
click The user clicked on the specified element.
change The specified element has been modified and enter has been pressed.
keyup The user released a keyboard key while the mouse was over the element.
keydown The user pressed a keyboard key while the mouse was over the element.
keypress The user pressed a keyboard key that produces a character while the mouse was over the element.
mousemove The user moved the mouse cursor while the cursor was over the specified element.
mousedown The user pressed the mouse cursor over the specified element.
mouseup The user released the mouse cursor over the specified element.
mouseover The user moved the mouse cursor over the specified element.
mouseout The user moved the mouse cursor from over the specified element to away from the specified element.
input The specified element has been modified.

Examples

// Move the turtle forward on every click of the button.

button("forward", "Move Forward");
onEvent("forward", "click", function(event) {
  moveForward();
});

Shrink and Grow

Grow an image on mouseover, back to normal size on mouseout.

                            // Grow an image on mouseover,
// back to normal size on mouseout.

image("logo", "https://code.org/images/logo.png");
setPosition("logo", 160, 240, 32, 32);

onEvent("logo", "mouseover", function(event){
  setSize("logo", 48, 48);
});

onEvent("logo", "mouseout", function(event){
  setSize("logo", 32, 32);
});

Event Details

You can dump all the details of the event parameter to the console to see what properties are available to use.

// Show the details of the callback function event parameter.
button("data", "Show Me Event Details");
onEvent("data", "click", function(event) {
  console.log(JSON.stringify(event));
});

The Event parameter

The event object carries many details about the event that occurred. It is loaded with properties about the mouse for mouse events, and the keyboard for keyboard events.

// Show the x, y coordinates of the mouse as it moves around the screen
onEvent("screen1", "mousemove", function(event) {
  console.log("x = "+event.x+" y="+event.y);
});

Two Different Types

Move the turtle forward on each click or backward on each key press.

// Move the turtle forward on each click or backward on each key press.

button("move", "Move");
onEvent("move", "click", function(event) {
  moveForward();
});
onEvent("move", "keypress", function(event) {
  moveBackward();
});

Where do you want it?

Move an image to the coordinates specified in a textboxes. Note that we declare one function that we use as callback for two different event handlers.

// Move an image to the coordinates specified in a textboxes.
// Note that we declare one function that we use as callback for two different event handlers.

textLabel("xLabel", "X coordinate:");
textInput("xCoordinate", 160);
textLabel("yLabel", "Y coordinate:");
textInput("yCoordinate", 240);
image("logo", "https://code.org/images/logo.png");
setPosition("logo", 160, 240, 32, 32);

onEvent("xCoordinate", "change", moveFromText);
onEvent("yCoordinate", "change", moveFromText);

// Define a funtion that moves the image based on the text box values
function moveFromText() { 
  var x = getText("xCoordinate");
  var y = getText("yCoordinate");
  setPosition("logo", x, y);
}

Syntax

onEvent(id, type, function(event)){ ... }

Parameters

NameTypeRequired?Description
type String The type of event to respond to. There are many events that can be used with an event handler to respond to all kinds of actions that a user can take. In block mode you can choose from a dropdown list of more than 10, but some of the most commonly used are shown above.
id String The ID of the UI control to which this event handler applies. Must begin with a letter, contain no spaces, and may contain letters, digits, - and _.
callback Function The callback function executed in response to an event for the matching UI element *id* of the matching *type*. The function can be inline, or separately defined in your app and called from onEvent().

Returns

No return value, callback function executed.

Tips

  • The UI element must be defined in your code before the matching onEvent() event handler.
  • The callback function receives an event object as its parameter, which can be used to gain more information about the event. You can ignore the App Lab warning event is defined but not called in your program.
  • The preferred placement in your code is screen elements at the top, event handlers in middle, other code/functions at end.

Found a bug in the documentation? Let us know at documentation@code.org