Pourquoi mon écouteur d'événements JavaScript ne fonctionne-t-il pas sur les éléments créés dynamiquement et comment puis-je y remédier à l'aide de la délégation d'événements ?

Gestion dynamique des événements en JavaScript

Lorsque vous travaillez avec des applications Web, il est souvent nécessaire de créer et de manipuler dynamiquement des éléments sur la page. Cependant, attacher des gestionnaires d'événements à des éléments créés dynamiquement peut s'avérer difficile.

Le problème

Dans l'extrait de code fourni, un bouton HTML est créé dynamiquement et inséré dans le DOM. . Un écouteur d'événement est alors attaché à ce bouton, mais le gestionnaire d'événements n'est pas déclenché lorsque le bouton est cliqué.

Délégation d'événement

Le problème est que l'écouteur d'événement est attaché au bouton avant qu'il ne soit ajouté au DOM. Lorsque le bouton est créé dynamiquement, il est attaché au DOM ultérieurement, mais l'appel de l'écouteur d'événement a déjà eu lieu.

Une solution à ce problème est la délégation d'événement. La délégation d'événements implique d'attacher un écouteur d'événements à un élément parent plutôt que directement à l'élément cible. Lorsqu'un événement se produit, l'événement est propagé dans l'arborescence DOM jusqu'à ce qu'il atteigne l'élément parent avec l'écouteur d'événement attaché.

Exemple

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend"); // Or any other selector.

  if (target) {
    // Do something with `target`.
  }
});

Dans cet exemple , la méthode close() est utilisée pour déterminer si l'événement de clic s'est produit dans l'élément #btnPrepend ou ses descendants. Si tel est le cas, la variable cible fera référence à l'élément sur lequel vous avez cliqué.

Alternative jQuery

jQuery simplifie la délégation d'événements avec la méthode on().

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`.
});

Conclusion

La délégation d'événements fournit une méthode fiable pour attacher dynamiquement des gestionnaires d'événements à éléments créés. En attachant l'écouteur d'événement à un élément parent, cela garantit que le gestionnaire d'événements sera déclenché même si l'élément cible est ajouté ultérieurement au DOM.

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!