Comprendre les événements DOM en JavaScript : un guide complet de l'interaction

Événements DOM en JavaScript

Les

Événements DOM sont des actions ou des occurrences qui se produisent dans le navigateur, telles que les interactions de l'utilisateur, le chargement de ressources ou les changements d'état. Les événements font partie intégrante du développement Web, permettant aux développeurs de rendre les pages Web interactives.

---

1. Que sont les événements DOM ?

Les événements DOM représentent des interactions ou des changements qui peuvent être détectés à l'aide de JavaScript. Exemples d'événements :

• Cliquer sur un bouton (clic)
• Saisir un champ de saisie (saisie, keydown, keyup)
• Survol d'un élément (mouseover, mouseout)
• Soumettre un formulaire (soumettre)
• Achèvement du chargement de la page (chargement)

---

2. Auditeurs d'événements

Les écouteurs d'événements sont des fonctions qui attendent qu'un événement spécifique se produise sur un élément cible.

Ajout d'un écouteur d'événement

Utilisez la méthode addEventListener pour attacher un écouteur d'événement à un élément.

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

Suppression d'un écouteur d'événement

Utilisez la méthode removeEventListener pour détacher un écouteur d'événement.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. Types d'événements DOM

A. Événements de souris

• click : se déclenche lorsque la souris est cliquée sur un élément.
• dblclick : se déclenche lorsque la souris est double-cliquée.
• mouseover : se déclenche lorsque la souris entre dans un élément.
• mouseout : se déclenche lorsque la souris quitte un élément.

B. É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.
• keypress : obsolète, utilisez plutôt keydown.

C. Événements de formulaire

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

D. Événements de fenêtre

• load : se déclenche lorsque la page est complètement chargée.
• resize : se déclenche lorsque la fenêtre du navigateur est redimensionnée.
• scroll : se déclenche lorsque la page défile.

E. Événements d'entrée

• input : se déclenche lorsque la valeur d'un champ de saisie change.
• focus : se déclenche lorsqu'un élément d'entrée obtient le focus.
• flou : se déclenche lorsqu'un élément d'entrée perd le focus.

---

4. L'objet événement

Lorsqu'un événement se produit, JavaScript fournit un objet événement contenant des détails sur l'événement.

Propriétés communes de l'objet é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 de l'événement.
• stopPropagation() : empêche l'événement de se propager aux éléments parents.

Exemple

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

---

5. Propagation d'événements

La propagation des événements détermine l'ordre dans lequel les gestionnaires d'événements sont exécutés.

A. Événement bouillonnant

L'événement commence au niveau de l'élément cible et remonte jusqu'à ses ancêtres.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Cliquer sur le bouton déclenchera les deux gestionnaires.

B. Capture d'événements

L'événement commence à la racine et descend jusqu'à l'élément cible.

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

Définir le troisième paramètre sur true active la capture.

Arrêter la propagation

Utilisez stopPropagation() pour empêcher toute propagation ultérieure.

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

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

---

6. Délégation d'événements

La délégation d'événements exploite le bouillonnement d'événements pour gérer les événements pour les éléments ajoutés dynamiquement.

Exemple

element.addEventListener("click", handler, true);

---

7. Exemples pratiques

A. Basculer la visibilité

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

B. Validation du formulaire

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

C. Parchemin infini

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8. Résumé

• Les événements DOM permettent l'interaction entre les utilisateurs et les pages Web.
• Utilisez addEventListener pour attacher des gestionnaires d'événements.
• Comprenez l'objet de l'événement et sa propagation pour une gestion efficace des événements.
• Utilisez la délégation d'événements pour de meilleures performances lorsque vous travaillez avec des éléments dynamiques.

En maîtrisant les événements DOM, vous pouvez créer des applications Web hautement interactives 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!