van an nguyen

User interaction and event handling

Input & output: how events work in Web apps & games?

Introduction to event management in JavaScript

HTML5 events

picture of keyboard an mouseThere is no input or output in JavaScript. We treat events caused by user actions as inputs, and we manipulate the DOM structure as output. Usually in games, we will maintain state variables representing moving objects like the position and speed of an alien ship, and the animation loop will refer to these variables in determining the movement of such objects.

In any case, the events are called DOM events, and we use the DOM APIs to create event handlers.

How to listen to events

There are three ways to manage events in the DOM structure. You could attach an event inline in your HTML code like this:

Method 1: declare an event handler in the HTML code

  1.  id=“someDiv” onclick=“alert(‘clicked!’)“> content of the div 

This method is very easy to use, but it is not the recommended way to handle events. Indeed, It works today but is deprecated (will probably be abandoned in the future). Mixing ‘visual layer’ (HTML) and ‘logic layer’ (JavaScript) in one place is really bad practice and causes a host of problems during development.

Method 2: attach an event handler to an HTML element in JavaScript

  1. document.getElementById(‘someDiv’).onclick = function() {
  2.    alert(‘clicked!’);
  3. }

This method is fine, but  you will not be able to attach multiple listener functions. If you need to do this, use the version shown below.

Method 3: register a callback to the event listener with the addEventListener method (preferred  method)

  1. document.getElementById(‘someDiv’).addEventListener(‘click’, function() {
  2.    alert(‘clicked!’);
  3. }, false);

Note that the third parameter describes whether the callback has to be called during the captured phase. This is not important for now, just set it to false.

Details of the DOM event are passed to the event listener function

When you create an event listener and attach it to an element, the listener will create an event object to describe what happened. This object is provided as a parameter of the callback function:

  1. element.addEventListener(‘click’, function(event) {
  2.    // now you can use event object inside the callback
  3. }, false);

Depending on the type of event you are listening to, you will consult different properties from the event object in order to obtain useful information such as: “which keys are pressed down?”, “what is the location of the mouse cursor?”, “which mouse button has been clicked?”, etc.

In the following lessons, we will remind you now how to deal with the keyboard and the mouse (previously covered during the HTML5 Part 1 course) in the context of a game engine (in particular, how to manage multiple events at the same time), and also demonstrate how you can accept input from a game pad using the new Gamepad API.

Further reading

In Method 1 (above) we mentioned that “Mixing ‘visual layer’ (HTML) and ‘logic layer’ (JavaScript) … bad practice”, and this is similarly reflected in many style features being deprecated in HTML5 and moved into CSS3. The management philosophy at play here is called “the separation of concerns” and applies in several ways to software development – at the code level, through to the management of staff. It’s not part of the course, but professionals may find the following references useful:


Leave a comment