Introduction aux événements du navigateur en JavaScript

Maîtriser les événements du navigateur en JavaScript

Comprendre et gérer les événements du navigateur est fondamental pour créer des applications web interactives. Ce guide complet vous aidera à comprendre les différents types d'événements du navigateur, comment les gérer, et fournira des exemples pratiques pour consolider vos connaissances.

Comprendre les événements du navigateur

Les événements du navigateur sont des actions ou des occurrences qui se produisent dans l'environnement du navigateur, et que le navigateur vous signale afin que vous puissiez y répondre si nécessaire. Il peut s'agir de tout, des interactions utilisateur comme un clic de souris ou l'appui sur une touche, aux événements générés par le système tels que le chargement d'une page web.

Types d'événements

Voici quelques types courants d'événements du navigateur :

• Événements de souris : clic, dblclick, mouseover, mouseout, mousedown, mouseup
• Événements clavier : keydown, keyup (keypress est déprécié)
• Événements de formulaire : submit, change, focus, blur
• Événements Document/Fenêtre : load, resize, scroll, unload

Ajouter des écouteurs d'événements

Les écouteurs d'événements sont des fonctions en JavaScript qui sont exécutées lorsqu'un événement spécifique se produit. Vous pouvez ajouter des écouteurs d'événements à un élément de deux manières principales :

1. Attributs d'événement HTML :

---

<button onclick="alert('Button clicked!')">Click Me!</button>

2. Écouteurs d'événements JavaScript :

---

<button id="myButton">Click Me!</button>

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

La deuxième méthode utilisant addEventListener est plus flexible et puissante, car elle vous permet d'ajouter plusieurs écouteurs pour le même événement, et vous donne également un meilleur contrôle sur la gestion de l'événement (comme l'utilisation de event.stopPropagation() ou event.preventDefault()).

Gérer les événements

Lorsqu'un événement se produit, le navigateur génère un objet événement qui le décrit et le transmet en tant qu'argument au gestionnaire ou à l'écouteur d'événement. Cet objet contient toutes les informations pertinentes sur l'événement, y compris le type d'événement, l'élément cible et d'autres propriétés spécifiques à l'événement.

---

<button id="myButton">Click Me!</button>
<div style="margin-top:10px;" id="eventInfo"></div>

<script>
  document.getElementById('myButton').addEventListener('click', function(event) {
    var eventInfo = 'Event Type: ' + event.type + '<br />Clicked Element: ' + event.target.tagName;
    document.getElementById('eventInfo').innerHTML = eventInfo;
  });
</script>

Try it Yourself »

Exemples concrets de gestion des événements du navigateur

Plongeons dans quelques exemples pratiques qui montrent comment gérer les événements du navigateur dans des scénarios réels.

Exemple 1 : Événement de soumission de formulaire

Gérer la soumission d'un formulaire pour valider les entrées avant d'envoyer les données à un serveur :

---

<form id="loginForm">
  Username: <input type="text" name="username" required />
  Password: <input type="password" name="password" required />
  <button type="submit">Login</button>
</form>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting normally
    if (this.username.value.length < 4 || this.password.value.length < 4) {
      alert('Username and password must be at least 4 characters long.');
    } else {
      this.submit(); // Submit the form manually if validation passes
      alert('successfully submitted');
    }
  });
</script>

Try it Yourself »

(Remarque : Une fonction classique est utilisée ici au lieu d'une fonction fléchée pour préserver le contexte this, permettant à this.username et this.password de référencer correctement les éléments du formulaire.)

Exemple 2 : Gestion des événements de survol et de sortie de souris

Modifier le style d'un bouton lorsque la souris le survole et le réinitialiser lorsque la souris le quitte :

---

<button id="hoverButton">Hover Over Me!</button>

<script>
  const button = document.getElementById('hoverButton');
  button.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'green';
  });
  button.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '';
  });
</script>

Try it Yourself »

Exemple 3 : Événements clavier

Exécuter une fonction lorsque la touche Entrée est enfoncée :

---

<input type="text" id="inputField" placeholder="Type something and press Enter" />

<script>
  document.getElementById('inputField').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      alert('You pressed Enter!');
    }
  });
</script>

Try it Yourself »

Exemple 4 : Fonctionnalité de glisser-déposer

Implémenter le glisser-déposer pour un transfert d'image simple au sein d'une page web :

---

<span>Drop image below</span>
<div id="dragArea" style="width: 300px; height: 300px; border: 2px dashed #ccc;">
  
</div>
<img id="draggableImage" src="https://via.placeholder.com/150" draggable="true" style="width: 150px; height: 150px;">

<script>
  const dragArea = document.getElementById('dragArea');
  const draggableImage = document.getElementById('draggableImage');

  // Event listener for the drag start
  draggableImage.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
  });

  // Event listener for dragging over the drag area
  dragArea.addEventListener('dragover', function(event) {
    event.preventDefault(); // Necessary to allow the drop
  });

  // Event listener for drop
  dragArea.addEventListener('drop', function(event) {
    event.preventDefault(); // Prevent default behavior (like opening as link for some elements)
    const data = event.dataTransfer.getData("text/plain");
    const image = document.getElementById(data);
    dragArea.appendChild(image);
  });
</script>

Try it Yourself »

Explication :

• Début du glissement : Lorsque vous commencez à faire glisser l'image, son ID est enregistré dans les données de glissement.
• Survol du glissement : Empêcher l'action par défaut est nécessaire pour autoriser le dépôt.
• Dépôt : Lors du dépôt, l'image est déplacée vers la zone de dépôt.

Exemple 5 : Événements de début et de fin d'animation

Utiliser des animations CSS et gérer leur début et leur fin avec JavaScript :

---

<div id="animateBox" style="width: 100px; height: 100px; background: red; position: relative; animation: moveBox 5s 2;"></div>
<div id="animationStatus"></div>

<style>
  @keyframes moveBox {
    0% { left: 0; }
    50% { left: 200px; }
    100% { left: 0; }
  }
</style>

<script>
  const box = document.getElementById('animateBox');
  const statusDisplay = document.getElementById('animationStatus');

  box.addEventListener('animationstart', function() {
    statusDisplay.innerHTML = 'Animation started';
  });

  box.addEventListener('animationend', function() {
    statusDisplay.innerHTML = 'Animation ended';
  });

  box.addEventListener('animationiteration', function() {
    statusDisplay.innerHTML = 'Animation iteration';
  });
</script>

Try it Yourself »

(Remarque : animationstart et les événements associés sont standard dans les navigateurs modernes. Les anciennes versions de Safari peuvent nécessiter des préfixes fournisseurs comme -webkit-animationstart, mais les noms standard sont recommandés pour le développement actuel.)

1. Div de statut d'animation : Ajout d'un nouvel élément <div> avec l'ID animationStatus. Cet élément est utilisé pour afficher des messages concernant le statut de l'animation.
2. Écouteurs d'événements : Mise à jour des écouteurs d'événements pour animationstart, animationend et animationiteration afin de modifier le texte du div animationStatus.
3. Retour en ligne : Chaque gestionnaire d'événement définit le HTML interne du div animationStatus, fournissant un retour en temps réel sur l'animation directement sur la page.

Exemple 6 : Événements personnalisés

Créer et déclencher des événements personnalisés pour gérer des scénarios spécifiques à l'application :

---

<button id="customEventButton">Trigger Custom Event</button>

<script>
  // Creating a custom event
  const myEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Custom event triggered' }
  });

  // Event listener for custom event
  document.addEventListener('myCustomEvent', function(event) {
    alert('Event Message: ' + event.detail.message);
  });

  // Dispatch the custom event when button is clicked
  document.getElementById('customEventButton').addEventListener('click', function() {
    document.dispatchEvent(myEvent);
  });
</script>

Try it Yourself »

Explication :

• Création d'un événement personnalisé : Définit un événement personnalisé avec des données supplémentaires (detail contenant un message).
• Gestion de l'événement : Configure un écouteur pour l'événement personnalisé qui affiche une alerte avec le message provenant des détails de l'événement.
• Déclenchement de l'événement : Déclenche l'événement personnalisé lors d'un clic sur le bouton.

Conclusion

Maîtriser les événements du navigateur est essentiel pour développer des applications web dynamiques et réactives. En comprenant comment utiliser correctement les écouteurs d'événements et gérer différents types d'événements, vous pouvez considérablement améliorer l'interactivité et l'utilisabilité de vos sites web. Les exemples ci-dessus illustrent diverses façons de gérer efficacement les événements, fournissant une base solide pour une exploration et une implémentation ultérieures de comportements plus complexes basés sur les événements dans vos projets.

Pratique

Quels sont les différents aspects des événements du navigateur en JavaScript ?

Les événements du navigateur permettent l'interaction de l'utilisateur avec les éléments d'une page web.Les événements du navigateur ne se produisent qu'après le chargement complet de la page.Chaque événement du navigateur possède un nom (comme click, dblclick, mouseover, etc.) et un code qui s'exécute lorsque l'événement se produit.Les événements du navigateur en JavaScript dépendent uniquement des actions de l'utilisateur, et non des scripts de la page.Il est possible de configurer des fonctions pour réagir à des événements du navigateur spécifiques et produire un résultat souhaité.