Partie 4 : Gérer les événements utilisateur

Cette partie couvre la gestion des interactions de l'utilisateur avec une page web, incluant les événements de la souris, du clavier, et la manipulation des formulaires.

1. Concepts & Définitions

• Événement : Une action effectuée soit par l'utilisateur (clic, frappe clavier) soit par le navigateur (chargement de la page).
• Mécanismes de réaction : Javascript offre des mécanismes pour réagir aux événements. Les événements sont généralement traités par une fonction qui s'exécute après que l'événement soit produit.
• Terminologie des événements :
  • Écouteur d'événement (Event Listener) : Un objet qui attend qu’un certain événement se produise (un clic, un mouvement de souris, etc.).
  • Gestionnaire d'événements : La fonction qui est appelée suite à la production de l’événement.
• Méthodes de gestion des événements :
  • Attribut HTML : Attacher directement un événement à un élément HTML en tant qu'attribut (ex: onclick).
  • Méthode addEventListener : Associer un événement à un élément en utilisant la méthode JavaScript addEventListener(). C'est la méthode recommandée.
• Événements de la souris : Déclenchés quand l'utilisateur interagit avec la page via la souris. Les événements DOM définissent neuf types principaux : mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mouseenter, mouseleave.
• Événements du clavier : Déclenchés par une interaction avec le clavier. Les trois principaux sont keydown, keyup, et keypress.
• Soumission de formulaire : L'action d'envoyer les données d'un formulaire à une adresse spécifiée (l'attribut action du formulaire).
• Interruption de formulaire : L'action d'empêcher la soumission par défaut d'un formulaire pour effectuer des traitements ou des validations côté client.
• Validation des données : Le processus qui consiste à s'assurer que l'entrée de l'utilisateur est conforme aux données attendues.
  • Validation côté client : Effectuée par le navigateur Web avant que les données ne soient envoyées au serveur.
  • Validation côté serveur : Effectuée par un serveur Web, une fois que les données sont envoyées.
• Validation des contraintes (HTML5) : Un concept de validation HTML basé sur :
  1. Les attributs d'une entrée (ex: required, pattern).
  2. Les sélecteurs CSS (ex: :valid, :invalid).
  3. Les propriétés et les méthodes du DOM.

2. Syntaxes & Codes

• Attacher un événement via un attribut HTML :

  <button onclick="alert('Bonjour')">Clic</button>
  

• Ajouter un écouteur d'événement :

  element.addEventListener(événement, fonction de rappel, useCapture);
  

• Supprimer un écouteur d'événement :

  element.removeEventListener("mouseover", fct1);
  

• Enregistrer un gestionnaire d'événement de souris :

  let btn = document.querySelector('#btn');
  btn.addEventListener('click', (event) => {
      console.log('click');
  });
  

• Enregistrer un gestionnaire d'événement de clavier :

  let msg = document.getElementById('message');
  msg.addEventListener("keydown", (event) => {
      // traitement keydown
  });
  

• Soumettre un formulaire via JavaScript :

  form.submit()
  

• Empêcher la soumission d'un formulaire :

  event.preventDefault();
  

• Retourner à la page précédente :

  window.history.back();
  

3. Attributs & Propriétés

Propriétés de l'objet event (Souris)

Propriétés de l'objet event (Clavier)

Attributs de validation de formulaire (HTML)

Sélecteurs CSS de validation

4. Exemples Pratiques (Codes complets du PDF)

• Ajouter et utiliser addEventListener :

  // Exemple 1: Fonction externe
  let element = document.getElementById("btn");
  element.addEventListener("click", message);
  function message() {
      alert("Vous avez cliqué!");
  }
  
  // Exemple 2: Fonction interne (anonyme)
  let element = document.getElementById("btn");
  element.addEventListener("click", function () { alert("Vous avez cliqué!")});
  

• Ajouter plusieurs écouteurs d'événements différents :

  let element = document.getElementById("btn");
  element.addEventListener("click", clickFct);       // Evénement : clic de la souris
  element.addEventListener("mouseover", mouseoverFxn); // Evénement : passage de la souris sur un élément
  element.addEventListener("mouseout", mouseoutFxn);   // Evénement : la souris quitte l’élément
  
  function clickFct() { alert("Vous avez cliqué :"); }
  function mouseoverFxn() {
      element.style.background = "red";
      element.style.padding = "8px";
  }
  function mouseoutFxn() {
      element.style.background = "white";
      element.style.padding = "2px";
  }
  

• Supprimer un écouteur d'événement :

  <p class="style1">Cet élément possède l’événement "mouseover"</p>
  <button id="btn" onclick="SupprimerEvnt()">Supprimer l’événement</button>
  <script>
      let element = document.querySelector(".style1");
      element.addEventListener("mouseover", fct1);
      function fct1(){
          alert("Evénement déclenché!");
      }
      function SupprimerEvnt(){
          element.removeEventListener("mouseover", fct1);
      }
  </script>
  

• Obtenir les coordonnées de la souris :

  <!DOCTYPE html>
  <html>
  <head>
      <title>Les événements de la souris</title>
      <style>
          #pos { background-color: goldenrod; height: 200px; width: 400px; }
      </style>
  </head>
  <body>
      <p>Faire bouger la souris pour voir sa position.</p>
      <div id="pos"></div>
      <p id="affichage"></p>
      <script>
          let pos = document.querySelector('#pos');
          pos.addEventListener('mousemove', (e) => {
              let affichage = document.querySelector('#affichage');
              affichage.innerText = `Screen X/Y: (${e.screenX}, ${e.screenY}) Client X/Y: (${e.clientX}, ${e.clientY})`
          });
      </script>
  </body>
  </html>
  

• Détecter les propriétés de l'événement clavier :

  <input type="text" id="message">
  <script>
      let zone = document.getElementById('message');
      zone.addEventListener('keydown', (event) => {
          console.log(`key=${event.key},code=${event.code}`);
      });
  </script>
  

• Soumission et réinitialisation de formulaire :

  <form id="FORM1" method="post" action="/code.php">
      <label>Nom <input type="text" name="nom"></label><br>
      <label>Age <input type="text" name="Age"></label> <br>
      <input type="submit" onclick="SoumettreForm()" value="SUBMIT">
      <input type="button" onclick="ResetForm()" value="RESET">
  </form>
  <p id="message"></p>
  <script>
      function SubmitForm() {
          document.getElementById("FORM1").submit();
      }
      function ResetForm() {
          document.getElementById("FORM1").reset();
          document.getElementById("message").innerHTML="Formulaire réinitialisé";
      }
  </script>
  

• Empêcher la soumission avec preventDefault :

  <form onsubmit="EnvoyerForm(event)">
      <input type="text">
      <button type="submit">Envoyer</button>
  </form>
  <script type="text/JavaScript">
      function EnvoyerForm(event){
          event.preventDefault();
          window.history.back();
      }
  </script>
  

• Validation de formulaire avec JavaScript :

  <form name="myForm" action="/code.php" onsubmit="return validerForm()" method="post">
      Nom: <input type="text" name="nom">
      <input type="submit" value="Submit">
  </form>
  <script>
      function validerForm() {
          let x = document.forms["myForm"]["nom"].value;
          if (x == "") {
              alert("Le champ “nom” doit être saisi");
              return false;
          }
      }
  </script>
  

• Validation automatique avec HTML5 required :

  <form action="/code.php" method="post">
      <input type="text" name="nom" required>
      <input type="submit" value="Submit">
  </form>
  

5. Spécifications Techniques

• Paramètres de addEventListener :

  • événement : Le nom de l'événement (chaîne de caractères, ex: "click").
  • fonction de rappel : La fonction qui gère l'événement.
  • useCapture : Paramètre booléen facultatif (défaut false). Spécifie s'il faut utiliser le bouillonnement d'événements ou la capture d'événements.

• Ordre des événements de la souris :

  • Pour un simple clic : mousedown → mouseup → click.
  • Pour un double clic : mousedown → mouseup → click → mousedown → mouseup → click → dblclick.
  • Les événements click ont toujours lieu avant l'événement dblclick.

• Distinction mouseover/mouseout vs mouseenter/mouseleave :

  • mouseover/mouseout : Se déclenchent lorsque le curseur entre/sort de l'élément et de ses descendants.
  • mouseenter/mouseleave : Se déclenchent uniquement lorsque le curseur entre/sort des limites de l'élément lui-même, ignorant les enfants.

• Ordre des événements du clavier :

  1. keydown
  2. keypress
  3. keyup

6. Points Critiques (Remarques du PDF)

• addEventListener : On peut ajouter plusieurs événements (identiques ou différents) à un même élément.
• Événements clavier et modification de texte :
  • Les événements keydown et keypress sont déclenchés avant toute modification apportée à la zone de texte.
  • L'événement keyup se déclenche après que les modifications aient été apportées à la zone de texte.
• form.submit() : Cette méthode ne prend pas de paramètres.
• window.history.back() : Cette méthode renvoie à l’URL précédente dans l’historique de navigation.