JavaScript

Événements

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Événements clavier

La fonction window.onkeydown est appelée lorsque l'on appuie sur une touche, window.onkeyup lorsque l'on relâche la touche.

Appuyer sur une touche.

window.onkeydown = function() { console.log('down'); };
window.onkeyup = function() { console.log('up'); };

Plusieurs écouteurs clavier

La fonction window.addEventListener permet d'ajouter une action sans détruire les actions précédemment enregistrées.

Appuyer sur une touche.

window.addEventListener('keyup',
  function() { console.log('keyup') }
);

Récupérer les touches

keyCode permet de récupérer le code (plus ou moins ASCII) de la touche.

const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
window.addEventListener('keydown', function(event) {
  const e = event.keyCode;
  if (65 <= e && e <= 90) {
    console.log(`You pressed key ${alphabet.charAt(e - 65)}`);
  }
});

Événements souris (1/2)

onmousedown, onmousemove, onmouseup sont appelées lorsque l'on utilise la souris sur un élément.

const area = document.getElementById("text-mouse");
area.addEventListener('mousedown', function(event) {
  console.log(`${event.offsetX},${event.offsetY}`);
});

La fonction recoit un événement (event) contenant les coordonnées (offsetX et offsetY).

Événements souris (2/2)

onmousemove est appelée lorsque l'on bouge la souris,
y compris si on n'appuie pas dessus.

let position = undefined, distance = 0;
const dist = (e,f) => position == undefined ? 0 :
    Math.abs(e.offsetX-f.x) + Math.abs(e.offsetY-f.y);
const copy = e => { return {x: e.offsetX, y: e.offsetY}; };
window.onmousedown = 
  e => { position = copy(e); distance = 0; };
window.onmousemove =
  e => { distance += dist(e, position); position = copy(e); };
window.onmouseup =
  e => { distance += dist(e, position); console.log(distance);
         distance = 0; };

Événement onclick

element.onmousemove est appelée lorsque l'on clique sur un élément.

const div = document.getElementById("dom-div");
const button = document.getElementById("dom-button");
button.onclick = function() {
  console.log(div.style.left);
  div.style.left = 30 + parseInt(div.style.left) + "px";
};

element.style permet d'accéder au style d'un élément.

setTimeout (1/2)

setTimeout(action, temps) permet de déclencher une action après un temps d'attente (en ms).

window.setTimeout(function() {
  console.log("3 seconds later…");
}, 3000);

setTimeout (2/2)

On peut appeler setTimeout() plusieurs fois avec la même fonction.

const colors = [ "Jour", "Nuit"];
let index = 0;
const fun = function() {
  index = 1 - index;
  console.log(colors[index]);
  window.setTimeout(fun, 2000);
};
fun();

setInterval

window.setInterval permet de rappeler une fonction à intervalles réguliers.

window.setInterval(
  function() {
    console.log("All work and no play makes Jack a dull boy.");
  }, 1000);

setTimeOut / setInterval et arguments

Pour utiliser donner des paramètres à une fonction appelée avec setTimeout ou setInterval, on utilise une closure.

const show = i => console.log(i);
window.setInterval(
  show(3), 1000);

const show = i => console.log(i);
window.setInterval(
  () => {show(3);}, 1000);

requestAnimationFrame

demande une animation dès que possible
(sans faire planter le navigateur ).

let counter = 0;
const start = new Date().getTime();
const animate = function() {
  const jump = new Date().getTime() - start;
  counter++;
  console.log(`${counter} function calls in ${jump} ms: ` +
    `${Math.floor(1000 * counter / jump)} calls per second!`);
  window.requestAnimationFrame(animate);
};
window.requestAnimationFrame(animate);

exécute la fonction demandée avant le prochain rafraîchissement de l'écran