12/13

7.3. Events

Events correspond to actions happening in an unpredictable manner. Typical events are users actions such as the use of the mouse and keyboard. For instance, clicking on the mouse can happen zero or multiple times, at a different time and different position. Programming in order to handle such events is called Event based programming.

The general objective of Event based programming is to link the reception of an event to an action, coded as a specific function. It usually corresponds to the following set of elements

  • A listener is set to way for a specific event.

  • Once an event happens, the listener trigger a response in calling an Action function.

The action function is often designated as a Callback Function, i.e. a function that is called by another one.

7.3. Events in JavaScript

JavaScript has a native system to handle event using the syntax.

Basic example

Consider the following example code

[webpage, src, js]

"use strict";


// Set up the event listener
document.addEventListener('click', actionClick);

// Function called every time a 'click' event is detected
function actionClick(eventParam) {
  console.log('Mouse is clicked !');
}

  • Note that the function actionClick is called every time the mouse is clicked (in the focus of the browser window).

Multiple events

Every time an event triggers an action function, a parameter (here called eventParam) is received by the function. This parameter contains various information depending on the event at its origin.

Consider the following example listening multiple events: pointer click, keyboard press, window resizing.

[webpage, src, js]

"use strict";

// Listening to pointer click
document.addEventListener('click', actionClick);

// Listening to keyboard touch press
document.addEventListener('keypress', actionKeyboardPress);

// Listening to window resizing
window.addEventListener('resize', actionResizeWindow);


function actionClick(eventParam) {
  const x = event.clientX;
  const y = event.clientY;
  console.log(`Mouse is clicked at position (${x}px, ${y}px)`);
}


function actionKeyboardPress(eventParam) {
  const key = event.key;
  console.log('Keyboard pressed: :', key);
}


function actionResizeWindow(eventParam) {
  const w = window.innerWidth;
  const h = window.innerHeight;
  console.log(`Window resized, new size=(${w}px, ${h}px)`);
}

  • Make sure that you can see the three different event prints on the console for the three different type of events.

  • Note that mouse and keyboard action can be listened from the global variable document, while window resizing is related to the global variable window [1].

  • The parameter received by the action function is used in different ways

    • For the mouse click, it is used to retrieve the position in pixels of the mouse within the window

    • For the keyboard press, it is used to get the Key that was pressed

    • For the window resizing, it is used to get the new window size

Resizing Three.js window

So far, the rendered image of the 3D scene was not adapted when the window was resized, leading to the creation of white space of scene cropping, until reloading the page.

To allow dynamic window resizing, the following code setup a listener on window resizing and adapts the render size and the camera parameter to adapt to the new window size.

[webpage, src, js]

Note that you can resize this scene


Exercise

  • Consider the following version of the code 04_exercise_displacement_keyboard

  • Change this code to mimic the behavior of the following webpage

    • The arrow keys of the keyboard are translating the cube on the plane in the (x,z) direction.

    • The '+'/'-' keys scale the cube.

Hints

  • You may listen to the event keydown which is fired as long as a touch is pressed (and not only one as keypress event).

  • You may set the variable Object3D.scale.x/y/z to change the scale of the object.

1. Any HTML DOM element can be a target for an eventListener