Maîtriser la gestion des événements en JavaScript : des bases aux techniques avancées

Gestion des événements en JavaScript

La gestion des événements est un aspect crucial de JavaScript qui permet aux développeurs de créer des pages Web interactives en répondant aux actions des utilisateurs telles que les clics, les pressions sur des touches ou les mouvements de la souris.

1. Que sont les événements ?

Un événement est toute interaction ou occurrence qui se produit dans une page Web, telle que :

• Actions de la souris : clic, double-clic, survol, sortie de la souris
• Actions du clavier : touche enfoncée, touche enfoncée, pression sur une touche
• Actions de formulaire : soumettre, modifier, se concentrer
• Actions de la fenêtre : charger, redimensionner, faire défiler

JavaScript écoute ces événements et répond par une action spécifique à l'aide de gestionnaires d'événements.

2. Ajout d'écouteurs d'événements

A. Utilisation des attributs HTML en ligne

Vous pouvez attacher des gestionnaires d'événements directement aux éléments HTML.

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

B. Utilisation de la méthode addEventListener

Il s'agit de la méthode préférée car elle permet de séparer HTML et JavaScript.

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

C. Utiliser le sur la propriété

Vous pouvez attribuer une fonction à une propriété d'événement d'un élément.

const button = document.querySelector("button");
button.onclick = function() {
  alert("Button clicked!");
};

3. Objet événement

Lorsqu'un événement se produit, JavaScript fournit un objet événement avec des propriétés et des méthodes utiles.

Exemple

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
});

Propriétés communes des objets d'événement

• type : le type d'événement (par exemple, clic, touche enfoncée).
• target : l'élément qui a déclenché l'événement.
• currentTarget : l'élément auquel le gestionnaire d'événements est attaché.
• PreventDefault() : empêche l'action par défaut (par exemple, arrêter la soumission du formulaire).
• stopPropagation() : empêche l'événement de remonter dans l'arborescence DOM.

4. Propagation d'événements

A. Bouillonnant

Les événements commencent au niveau de l'élément cible et remontent jusqu'à ses ancêtres.

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Button clicked!");
});

Si vous cliquez sur le bouton, le bouton et les gestionnaires d'événements du div s'exécuteront.

B. Capturer

Les événements se déplacent de la racine vers l'élément cible.

Pour utiliser la capture, définissez le troisième argument de addEventListener sur true :

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

Empêcher la propagation

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

5. Types d'événements courants

Événements de souris

• click : se déclenche lorsqu'un élément est cliqué.
• dblclick : se déclenche lorsqu'un élément est double-cliqué.
• mouseover : se déclenche lorsque le pointeur de la souris entre dans un élément.

Événements de clavier

• keydown : se déclenche lorsqu'une touche est enfoncée.
• keyup : se déclenche lorsqu'une touche est relâchée.

Événements de formulaire

• submit : se déclenche lorsqu'un formulaire est soumis.
• change : se déclenche lorsque la valeur d'un élément de formulaire change.

Événements de fenêtre

• load : se déclenche lorsque le chargement de la page est terminé.
• resize : se déclenche lorsque la fenêtre du navigateur est redimensionnée.

6. Suppression des écouteurs d'événement

Pour supprimer un écouteur d'événement, utilisez la méthode removeEventListener.

const button = document.querySelector("button");
button.onclick = function() {
  alert("Button clicked!");
};

7. Exemple pratique : validation de formulaire

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
});

8. Meilleures pratiques

1. Utilisez addEventListener pour plus de flexibilité et un code plus propre.
2. Gardez JavaScript séparé du HTML pour une meilleure maintenabilité.
3. Utilisez stopPropagation et PreventDefault judicieusement pour gérer le comportement des événements.
4. Supprimez les écouteurs d'événements lorsqu'ils ne sont plus nécessaires pour éviter les fuites de mémoire.

9. Résumé

• La gestion des événements en JavaScript permet des applications Web interactives.
• Utilisez addEventListener pour attacher des gestionnaires d'événements.
• Comprendre l'objet événement et sa propagation pour les cas d'utilisation avancés.
• Pratiquez une bonne gestion des auditeurs d'événements pour des performances optimales.

La maîtrise de la gestion des événements est une compétence clé pour créer des applications Web dynamiques et conviviales.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!