Gestion directe ou déléguée des événements dans jQuery : quelle approche `.on()` devriez-vous choisir ?

Déléguer la gestion des événements dans jQuery : direct ou délégué .on()

La méthode jQuery .on() permet d'enregistrer des gestionnaires d'événements sur les éléments DOM. Deux approches distinctes de la gestion des événements sont la liaison directe et déléguée. La liaison directe attache directement les gestionnaires d'événements à des éléments spécifiques, tandis que la liaison déléguée permet la gestion des événements sur les éléments qui correspondent à un sélecteur au sein d'un élément parent.

La dernière phrase du paragraphe donné concernant les gestionnaires d'événements délégués indique que jQuery "exécute le gestionnaire de tous les éléments... correspondant au sélecteur." Cela fait référence au mécanisme de bouillonnement d'événements dans DOM.

Lorsqu'un gestionnaire d'événements délégué est attaché à un élément parent à l'aide de .on() avec un sélecteur, les événements sont gérés non seulement sur les éléments sélectionnés mais également sur leurs descendants. qui correspondent au sélecteur. Au fur et à mesure que l'événement remonte dans l'arborescence DOM, jQuery vérifie si des éléments le long du chemin correspondent au sélecteur et déclenche le gestionnaire si une correspondance est trouvée.

Pour illustrer la différence, considérons les exemples suivants :

$("div#target span.green").on("click", function() {
  alert($(this).attr("class") + " is clicked");
});

Cela lie directement le gestionnaire de clics à tous les fichiers éléments avec la classe verte dans le div #target. Chacun de ces éléments gérera indépendamment les événements de clic.

En revanche, ce qui suit utilise la liaison déléguée :

$("div#target").on("click", "span.green", function() {
  alert($(this).attr("class") + " is clicked");
});

Ici, le gestionnaire d'événements de clic est attaché au div #target, mais le sélecteur "événement bouillonnant" sur les éléments correspondant à "vert". Cela signifie que tout futur les éléments avec la classe "verte" créés dans le div #target déclencheront également le gestionnaire de clics.

La liaison déléguée est particulièrement utile lors de l'ajout et de la suppression dynamiques d'éléments de la page, car elle garantit que les nouveaux éléments héritent de l'événement. comportement de manipulation sans nécessiter de liaison manuelle.

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!