Element.addEventListnener()

On a vu precedemment qu'on pouvait reagir aux touches du clavier avec window.addEventListener() comme ceci

function handleKey(event) {
  // ce qu'on fait quand une touche est pressée
}

window.addEventListener("keypress", handleKey);

Ce qu'il se passe est que l'on donne sous forme de texte le type d'evenement auquel on souhaite reagir, puis le nom de la fonction a executer lorseque cet evenement intervient.

Cependant avec cette methode on accroche la fonction a toute la fenetre, mais maintenant qu'on sait comment recuperer nos elements HTML depuis notre javascript, je peux enfin vous dire que les element ont eux aussi la fonction addEventListener ce qui me permet de reagir a des evenements particuliers sur des elements particuliers comme les evenements "click" par exemple.

Voici un example basique de compteur que l'on peut augmenter et diminuer en appuyant sur des boutons.

html

<!-- [...] -->
<main>
  <button id="minus-button">-</button>
  <div id="count">0</div>
  <button id="plus-button">+</button>
</main>
<!-- [...] -->

js

<script>
  let count = 0;

  const minusButton = document.querySelector("#minus-button");
  const plusButton = document.querySelector("#plus-button");

  minusButton.addEventListener("click", countDown);
  plusButton.addEventListener("click", countUp);

  function countUp(event) {
    count = count + 1;
    document.querySelector("#count").textContent = count;
  }

  function countDown(event) {
    count = count - 1;
    document.querySelector("#count").textContent = count;
  }
</script>

Petite liste d'événements

Des type d'événements il en existe beaucoup, voici une bonne petite liste pour bien commencer

• mousedown : quand le bouton de la souris est enfoncé
• mouseup : quand vous relâcher le bouton de la souris
• mouseover : qund la souris se déplace au dessus de l'élément
• mouseenter : la souris viens d'arriver au dessus de l'élément
• mouseleave : le souris viens de quitter l'espace au dessus de l'élément
• focus : l'utilisateur vient de sélectionner l'élément (possiblement en cliquant desus ou possiblement en utilisant la touche Tab)
• blur : l'élément vient de perdre le focus
• pointerdown : comme mousedown mais inclus aussi le tactile et pas juste la souris
• pointerup
• pointerover
• pointerenter
• pointerleave

L'objet Event

Vous aurez remarqué les fonction que l'on donne à addEventListener ont quelque chose entre leur parathèses au moment de leur création comme ceci:

//                V ICI V
function countDown(event) {
  //
}

Ça vient du fait que cette fonction ne sera pas appellée par vous, mais par le navigateur. Quand le navigateur devra appeller votre fonction il lui donnera un objet contenant plein d'informations à propos de l'événement qui l'a déclanché. Dans le cas des événements mouse ou pointer, vous aurez des informations sur la position du curseur de l'utilisateur et dans le cas d'un événement claviers vous aurez des informaitons sur l'état du clavier comme la touche qui a été activée et est-ce que les touches shift et contrôle sont enfoncées ou non.

Je vous recommande vivement de prendre l'habitude d'inspecter les événements, comme ci-dessous, pour savoir ce qui est à votre disposition pour enrichir vos intéractions.

//                V ICI V
function countDown(event) {
  console.log(event);
}

Les inputs, ils sont fait pour ça

Il existe des éléments HTML prévus pour que l'utilisateur puisse donner des informations, les <input>. Je dis "les" inputs aux pluriel parce qu'ils existent de plusieurs formes différentes en fonction de ce que vous voulez recevoir comme infos.

Allez-y testez l'HTML suivant.

<input type="text" /> 
<input type="password" />

Vous verrez deux <input> identiques, sauf que si vous tapez dans celui qui a type="password" ce que vous taperez sera masqué. Voici la liste des différents types d'inputs : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Certains sont déjà hautement intéractifs comme type="date" ou type="color".

On peut retrouver la valeur d'un input via sa propriété element.value.

Voici un exemple HTML

<input type="text" id="nameInput" />
<button>generate</button>
<p id="greetingMessage"></p>

JS

const nameInput = document.querySelector("#nameInput");
const button = document.querySelector("main button");
const message = document.querySelector("#greetingMessage");

function sayHello() {
  message.innerText = "hello " + nameInput.value;
}

button.addEventListener("click", sayHello);

Il y a aussi des événements spécifiquement accrochable aux <input> comme "change" et "input".

... ouais je sais, c'est pas top top, mais ca ressemble a ca d'accorcher l'evenement "input", sur un element <input>.

//                 vv l'élément vv          vv l'événement vv
document.querySelector("input").addEventListener("input", aFunctionSomewhereIDontCare);

La différence entre ces deux événements est importante pour l'UX. "change" se fait quand l'utilisateur a fini sont intéraction avec l'input alors que l'événement de type "input" s'exécute pour chaque intéraction.

• "input" est donc pertinent pour des choses comme un tiroir de suggestions dans une barre de recherche par exemple
• "change" est plus pertinent pour valider une saisie, puisque je n'ai pas envie de colorer en rouge un élément <input> alors que m'on utilisateur n'a pas fini de taper dedans.

Vous noterez aussi que pour l'<input type="checkbox"> la valeur est accessible via element.checked.

<input type="text" id="nameInput" />
<input type="checkbox" id="vegeInput" />
<p>
  <span id="guestName"></span>
  is vegetarian: <span id="isVegetarian"></span>
</p>

const nameInput = document.querySelector("#nameInput");
const vegeInput = document.querySelector("#vegeInput");
const guestName = document.querySelector("#guestName");
const vegetarianLabel = document.querySelector("#isVegetarian");

function changeName() {
  guestName.innerText = nameInput.value;
}

function changeVegetarian() {
  if (vegeInput.checked) {
    vegetarianLabel.innerText = "✅";
  } else {
    vegetarianLabel.innerText = "❌";
  }
}

nameInput.addEventListener("change", changeName);
vegeInput.addEventListener("change", changeVegetarian);