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

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

INTRODUCTION – EVENT MANAGEMENT IN JAVASCRIPT

In JavaScript, we treat events made by users as an input, and we manipulate the DOM structure as an output. Most of the time in games/animations, we will change state variables of moving objects, such as position or speed of an alien ship, and the animation loop will take care of these variables to move the objects.

The events are called DOM events, and we use the DOM JavaScript API to create event handlers.

THERE ARE THREE WAYS TO MANAGE EVENTS IN THE DOM STRUCTURE.

First way: declare event handlers in the HTML code

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

Note: this is not the recommended way to handle events, even if it’s very easy to use. Mixing the ‘visual layer’ (HTML) and the ‘logic layer’ (JavaScript) in one place is ok for small examples (we have used this in some examples in this course) but is not the recommended way for full scale applications where a clean separation is best.

Second way: add an event handler to an HTML element in JavaScript

Here is an example:

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

This method is fine, but  you will not be able to attach several listener functions. If you need to do this, the preferred version is the next one.

Third way: register a callback to the event listener with the addEventListener method

This is how we do it:

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

The third parameter is not important for now, just set it to false, or simply do not add a third parameter.

THE DOM EVENT THAT IS PASSED TO THE EVENT LISTENER FUNCTION

When you create an EventListener and attach it to an element,  an event object will be passed as a parameter to your callback, just like this:

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

Depending on the type of event you are listening to, we will use different properties from the event object in order to get useful information like: “what keys have been pressed down?”, “what is the position of the mouse cursor?”, “which mouse button is down?”, etc.

SOURCE CODE FOR THE KNOWLEDGE CHECK 4.3.1

Online example on JS Bin

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>Click on button</title>
  6. </head>
  7. <body>
  8.    <button id=“myButton”>Click me!</button>
  9.    var button = document.getElementById(‘myButton’);
  10.    // Define a click listener on the button
  11.    button.addEventListener(‘click’, processClick);
  12.    // callback
  13.    function processClick(event) {
  14.       console.log(“Button clicked”);
  15.       // What is the event parameter?
  16.    }
  17. </body>
  18. </html>
Advertisements