Les événements en javascript

Objectif

• ِConnaitre les événements en JavaScript

Introduction aux événements JavaScript

1. Apport de Javascript

   • Un des principaux intérêts de JavaScript réside dans la possibilité de programmer les réactions du navigateur face aux actions de l'utilisateur.
   • Grâce à JavaScript, on peut modifier le comportement par défaut du navigateur et l'adapter ainsi à des situations particulières.
   • Cette programmation permet de casser un peu la rigidité d'HTML et surtout de diminuer les échanges entre le navigateur et le serveur, dans la mesure où le navigateur va être capable de prendre des initiatives.
   • Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ...
   • Les principales interventions de l'utilisateur (le passage de la souris sur un objet ou un clic, l'envoi d'un formulaire...) sont classifiées en événements.
   • Les attributs HTML de type événements sont nombreux. Nous allons essayer dans cet article de définir les événements puis en passer en revue les plus utilisés d’entre eux dans cette partie.

2. Qu'est-ce qu'un événement JavaScript?

   • Un événement en programmation web est une action ou un incident détecté par le navigateur, tel qu'un clic de souris, une pression de touche, ou le chargement complet d'une page. Les événements permettent d'interagir avec les éléments HTML et de créer des expériences utilisateur dynamiques.
   • Les événements en JavaScript sont des actions ou des occurrences qui se produisent dans le navigateur, comme le clic d'un bouton, la saisie d'un texte, le chargement d'une page, etc.
   • Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité.
   • Les événements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-même.

3. Types d'événements en JavaScript

   • Il existe de nombreux types d'événements, notamment les événements de souris, de clavier, de formulaire, de média, de réseau, de gestion de documents, etc.
   • Les attributs HTML de type événements sont très nombreux. Nous allons passer en revue les plus utilisés d’entre eux dans ce tableau.

4. Écouteurs d'événements en Javascript

   • Les écouteurs d'événements (ou gestionnaires d'événements) sont des fonctions JavaScript qui sont exécutées en réponse à un événement spécifique. Ils permettent de spécifier comment votre code doit réagir aux actions de l'utilisateur.
   • Les "écouteurs d'événements" en JavaScript sont des fonctions ou des morceaux de code qui attendent et réagissent à des événements spécifiques qui se produisent dans le navigateur.
   • Ces événements peuvent être déclenchés par l'utilisateur (comme un clic de souris, une pression de touche ou la soumission d'un formulaire) ou par le navigateur lui-même (comme le chargement complet d'une page).

Gestion des événements en JavaScript

1. Attributs HTML vs. Écouteurs d'événements

   • Vous pouvez attacher des gestionnaires d'événements directement dans les balises HTML à l'aide d'attributs tels que onclick, onmouseover, etc. Cependant, il est recommandé d'utiliser des écouteurs d'événements en JavaScript pour une meilleure séparation des préoccupations et une maintenabilité accrue.

   Attribut	Propriété associée	Description
   onAbort	onabort	Est déclenché lorsque l'utilisateur interrompt le chargement d'une image.
   onBlur	onblur	Est déclenché lorsqu'un objet perd le focus.
   onClick	onclick	Est déclenché lorsque l'utilisateur clique sur un objet.
   onChange	onchange	Est déclenché lorsque l'utilisateur a changé la valeur d'un champ de saisie.
   onDbIClick	ondblclick	Est déclenché lorsque l'utilisateur double-clique sur un objet.
   onDragDrop	ondrapdrop	Est déclenché lorsque l'utilisateur fait glisser un objet dans le browser.
   onError	onerror	Est déclenché lorsqu'une erreur se produit lors du chargement d'une image ou de l'exécution de code JavaScript.
   onFocus	onfocus	Est déclenché lorsqu'un objet reçoit le focus.
   onKeyDown	onkeydown	Est déclenché lorsque l'utilisateur enfonce une touche.
   onKeyPress	onkeypress	Est déclenché lorsque l'utilisateur a appuyé sur une touche.
   onKeyUp	onkeyup	Est déclenché lorsque l'utilisateur relâche une touche.
   onLoad	onload	Est déclenché lorsqu'un document (ou une image) commence à se charger.
   onMouseDown	onmousedown	Est déclenché lorsque l'utilisateur enfonce un des boutons de la souris.
   onMouseMove	onmousemove	Est déclenché lorsque l'utilisateur déplace la souris.
   onMouseOut	onmouseout	Est déclenché lorsque la souris vient de passer au-dessus d'un lien, d'une ancre ou d'une zone d'une carte cliquable et qu'elle retourne sur le fond de la fenêtre.
   onMouseOver	onmouseover	Est déclenché lorsque la souris passe au-dessus d'un lien, d'une ancre ou d'une zone d'une carte cliquable.
   onMouseUp	onmouseup	Est déclenché lorsque l'utilisateur relâche un des boutons de la souris.
   onMove	onmove	Est déclenché lorsqu'une fenêtre est déplacée.
   onReset	onreset	Est déclenché au moment où l'utilisateur annule les données saisies dans un formulaire.
   onResize	onresize	Est déclenché lorsqu'une fenêtre ou une frame est redimensionnée.
   onSelect	onselect	Est déclenché lorsque l'utilisateur sélectionne du texte dans un champ de saisie.
   onSubmit	onsubmit	Est déclenché au moment où un formulaire est soumis.
   onUnload	onunload	Est déclenché au moment où un document se décharge (c'està-dire lors du chargement d'un nouveau document).
   Source du tableau:HTML et Javascript Daniel Charnay, Philippe Chaléat

2. Méthodes pour attacher des écouteurs d'événements

   • JavaScript offre plusieurs méthodes pour attacher des écouteurs d'événements aux éléments HTML, notamment addEventListener, attachEvent (obsolète), et les méthodes de l'objet window, telles que window.onload.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Exemple de addEventListener</title>
   </head>
   <body>
       <button id="monBouton">Cliquez ici</button>
   
       <script>
           // Sélectionnez l'élément bouton par son ID
           var bouton = document.getElementById("monBouton");
   
           // Ajoutez un gestionnaire d'événements click à l'élément bouton
           bouton.addEventListener("click", function() {
               alert("Le bouton a été cliqué !");
           });
       </script>
   </body>
   </html>
   

Association des événements aux objets

• Voici un tableau récapitulant les objets auxquels peuvent être associés chaque événement :

Evénements	Objets concernés
abort	Image
blur	Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
change	FileUpload, Select, Submit, Text, TextArea
click	Button, document, Checkbox, Link, Radio, Reset, Select, Submit
dblclick	document, Link
dragdrop	window
error	Image, window
focus	Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
keydown	document, Image, Link, TextArea
keypress	document, Image, Link, TextArea
keyup	document, Image, Link, TextArea
load	Image, Layer, window
mousedown	Button, document, Link
mousemove	Aucun spécifiquement
mouseout	Layer, Link
mouseover	Area, Layer, Link
mouseup	Button, document, Link
move	window
reset	form
resize	window
select	text, Textarea
submit	Form
unload	window
Source du tableau:www.commentcamarche.net

Exercices d'application

1. Exercice 1 : Bouton Clic

   1. Enoncé

      • Question HTML: Créez un bouton avec l'ID "myButton" dans une page HTML.
      • Question CSS: Ajoutez une classe CSS "button-style" pour styliser le bouton, par exemple en changeant sa couleur de fond.
      • Question JavaScript : Écrivez du code JavaScript pour détecter le clic sur le bouton et afficher une boîte d'alerte disant "Bouton cliqué !" lorsque le bouton est cliqué.

   2. Solution

      Solution

      html

      <button id="myButton">Cliquez ici</button>
      

      css

      .button-style {
          background-color: blue;
          color: white;
          padding: 10px 20px;
          border: none;
          cursor: pointer;
      }
      

      Javascript

      const myButton = document.getElementById('myButton');
      
      myButton.addEventListener('click', function() {
          alert('Bouton cliqué !');
      });

2. Exercice 2 : Survol de la Souris

   1. Enoncé

      • Question HTML: Créez un élément HTML (par exemple, une image ou un div) avec l'ID "myElement".
      • Question CSS: Ajoutez des styles CSS pour cet élément afin qu'il ait une certaine taille et une couleur de fond.
      • Question JavaScript: Écrivez du code JavaScript pour détecter quand la souris survole l'élément et changez sa couleur de fond en rouge. Lorsque la souris quitte l'élément, revenez à la couleur de fond initiale.

   2. Solution

      Solution

      html

      <div id="myElement">Survolez-moi</div>
      

      css

      #myElement {
          width: 200px;
          height: 100px;
          background-color: yellow;
      }

      Javascript

      const myElement = document.getElementById('myElement');
      
      myElement.addEventListener('mouseover', function() {
          myElement.style.backgroundColor = 'red';
      });
      
      myElement.addEventListener('mouseout', function() {
          myElement.style.backgroundColor = 'yellow';
      });
      

3. Exercice 3 : Validation de Formulaire

   1. Enoncé

      • Question HTML: Créez un formulaire HTML simple avec un champ de texte pour le nom et un bouton de soumission.
      • Question CSS: Stylisez le formulaire pour le rendre attrayant.
      • Question JavaScript : Écrivez du code JavaScript pour valider que le champ de texte n'est pas vide lorsque l'utilisateur soumet le formulaire. Affichez un message d'erreur si le champ est vide et empêchez l'envoi du formulaire.

   2. Solution

      Solution

      html

      <form id="myForm">
          <label for="name">Nom :</label>
          <input type="text" id="name" name="name">
          <button type="submit">Soumettre</button>
      </form>
      

      css

      /* Ajoutez des styles CSS selon vos préférences */
      

      Javascript

      const myForm = document.getElementById('myForm');
      const nameInput = document.getElementById('name');
      
      myForm.addEventListener('submit', function(event) {
          if (nameInput.value.trim() === '') {
              alert('Le champ Nom ne peut pas être vide.');
              event.preventDefault(); // Empêche l'envoi du formulaire
          }
      });
      

4. Exercice 4 : Compteur de Clics

   1. Enoncé

      • Question HTML : Créez un bouton avec l'ID "clickButton" et un paragraphe avec l'ID "clickCount" dans une page HTML.
      • Question CSS: Stylisez le bouton et le paragraphe comme vous le souhaitez.
      • Question JavaScript : Écrivez du code JavaScript pour compter combien de fois l'utilisateur clique sur le bouton. Mettez à jour le texte du paragraphe avec le nombre de clics.

   2. Solution

      Solution

      html

      <button id="clickButton">Cliquez ici</button>
      <p id="clickCount">Nombre de clics : 0</p>
      

      css

      /* Ajoutez des styles CSS selon vos préférences */
      

      Javascript

      const clickButton = document.getElementById('clickButton');
      const clickCount = document.getElementById('clickCount');
      
      let count = 0;
      
      clickButton.addEventListener('click', function() {
          count++;
          clickCount.textContent = `Nombre de clics : ${count}`;
      });
      

5. Exercice 5 : Clavier Magique

   1. Enoncé

      • Question HTML : Créez un champ de texte avec l'ID "textInput" dans une page HTML.
      • Question CSS: Ajoutez des styles CSS pour le champ de texte.
      Question JavaScript : Écrivez du code JavaScript pour détecter lorsque l'utilisateur appuie sur la touche "Enter" (la touche avec le code 13) dans le champ de texte. Lorsque cela se produit, affichez un message dans la console indiquant "Touche Entrée pressée !" et effacez le contenu du champ de texte.

   2. Solution

      Solution

      html

      <input type="text" id="textInput">
      

      css

      /* Ajoutez des styles CSS selon vos préférences */
      

      Javascript

      const textInput = document.getElementById('textInput');
      
      textInput.addEventListener('keydown', function(event) {
          if (event.keyCode === 13) { // Vérifie si la touche "Enter" (code 13) est pressée
              console.log('Touche Entrée pressée !');
              textInput.value = ''; // Efface le contenu du champ de texte
          }
      });