coopernet Réussir son site web et ses applications de la conception à la réalisation

Les événements permettent de déclencher une fonction après un ... événement ! Il peut s'agir classiquement d'un clic sur un bouton.

Liste des événements

Voici la liste des événements principaux, ainsi que les actions à effectuer pour qu'ils se déclenchent :

Exemple

// gestion de l'événement click sur div1

// Récupération d'un élément du DOM
let h1 = window.document.getElementById("h1");
/**
 * Gestion de l'événement click sur h1
 * On assigne à la propriété "onclick"
 * une méthode appellée lors d'un click sur
 * l'objet en question.
 * Le "this" devient alors l'objet en question
 */
h1.onclick = function() {
  console.log("click sur le h1");
  console.log(this);
};

Objet événement

l'objet événement (qui correspond à l'interface Event) est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Une interface définit  les méthodes à implémenter, elle permet de définir un contrat : chaque classe implémentant l’interface sera tenue d’implémenter les méthodes de l’interface. Voir les méthodes et propriétés de l'interface Event.

Plusieurs paramètres 

Exemple de récupération de l'objet événement

// gestion de l'événement click sur h1
h1.onclick = function(e) {
  console.log("click sur le h1");
  console.log(e.target);
};

Exemple de passage de 2 paramètres à la fonction qui est déclenchée au click sur h1

h1.onclick = function(e) {
  manageClick(e,"Hello");
};
const manageClick = function(e,j){
  console.log("click sur le h1");
  console.log(e.target);
  console.log(j);
}

addEventListener

Documentation 

La méthode addEventListener présente deux avantages principaux par rapport à l'utilisation de propriétés de type "onclick" :

1. elle permet à un élément du dom d'écouter plusieurs événements de même type
2. elle attend un troisième paramètre qui permet de gérer plus finement les événements

La méthode addEventListener est appelée depuis une cible (un élément du dom en général) et attend trois paramètres :

1. le type d'évenement (click, hover, ...)
2. une fonction à appeler chaque fois que l'événement spécifié dans le premier argument est envoyé à la cible
3. historiquement, le troisième paramètre de addEventListener était un boolean qui indiquait s'il fallait ou non utiliser la "capture". Cette dernière peut être définie comme la phase déscendante de la propagation de l'événement en opposition à la phase montante ou "bubbling phase" . 
   
    Plutôt que d'ajouter davantage de paramètres à la fonction, le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'événement.

Exemple de code pour démontrer comment la capture peut être utilisée pour intercepter et potentiellement bloquer des événements.

HTML

<div id="parent">
  <div id="child">Click me</div>
</div>

const parent = document.querySelector("#parent");
const child = document.querySelector("#child");

// Ajout d'une phase de capture descendante au parent
parent.addEventListener(
  "click",
  function(event) {
    console.log("Parent clicked");
    // Empêche l'événement d'atteindre l'enfant
    event.stopPropagation();
  },
  true// option pour la capture à vrai 
); 

// Ecouteur classique (phase montante) sur l'enfant
child.addEventListener("click", function(event) {
  console.log("Child clicked");
});

Gestion des événements clavier

référence : https://developer.mozilla.org/fr/docs/Web/API/Element/keydown_event

L'événement keydown est déclenché lorsque l'utilisatrice ou l'utilisateur appuie sur une touche du clavier.

Exemple corrigé

Imaginons que nous ayons une liste d'images cliquables grâce à la fonction addEventListner. La bonne pratique pour rendre cette fonctionnalité accessible sera de :

1. rendre ces images "focusables" via la touche tab
2. donner une alternative à l'événement "click" en utilisant l'événement "keydown" et en vérifiant que c'est bien  la touche "Enter" qui a été la dernière utilisée.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>keyDown</title>
</head>
<body>
  <img id="img1" tabindex="1" src="./images/ninja1.jpg" alt="">
  <img  id="img2" tabindex="2" src="./images/ninja2.jpg" alt="">
  <script src="./keyDown.js"></script>
</body>
</html>

const images = document.querySelectorAll("img");
images.forEach((img, index )=> {
  img.addEventListener("click", () => {
    console.log(`image ${img.getAttribute("id")} cliquée`);
  });
  img.addEventListener("keydown", (event) => {
    if(event.key === "Enter") console.log(`Touche ${event.key} appuyée - image id : `, img.getAttribute("id"));
  })
}) 

Exercices

Paragraphes Lorem ipsum

En js, ajouter un bouton et une section dans le body. Le bouton aura pour intitulé : "Ajouter un paragraphe". Au click sur ce bouton, un nouveau paragraphe sera ajouté comme dernier enfant de la section qui comprendra tous les paragraphes. Chaque paragraphe aura "Lorem ipsum ..." comme texte.

Liste de tâches

En js, ajouter un formulaire dans le body comprenant une zone de texte (input) et un bouton "Ajouter une tâche". Au click sur ce bouton, et après avoir renseigné l'input du formulaire  (<input type="text">), une tâche (ex : acheter du pain ) apparaîtra juste sous le formulaire et dans une section. 

Chaque tâche est crée avec la balise section et permettra d'afficher côte à côte :

• l'intitulé de la tâche,
• un bouton pour valider la tâche (cette dernière sera alors barrée, un bouton "invalider" remplace le bouton "valider" et  toute la tâche est déplacée en fin de section qui entoure l'ensemble des tâches
• un bouton pour supprimer la tâche qui déclenchera au click une "pop-up" grâce à la méthode "confirm()"  pour que l'internaute confirme son choix de suppression. En cas de confirmation, la section "tâche" correspondante sera supprimée.