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

Gestion directe ou déléguée des événements dans jQuery .on()

La méthode .on() de jQuery fournit deux approches distinctes de gestion des événements : directe et délégué. La différence réside dans la portée de la gestion des événements.

Gestion directe des événements

Dans la gestion directe des événements, le gestionnaire d'événements est lié directement à l'élément cible. Cela signifie que le gestionnaire n'est exécuté que lorsque l'événement se produit directement sur cet élément, et non sur aucun de ses descendants. Par exemple :

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

Gestion déléguée des événements

Dans la gestion déléguée des événements, le gestionnaire d'événements est lié à un élément ancêtre et le sélecteur spécifie les éléments descendants qui devrait déclencher le gestionnaire. Cela permet au gestionnaire de gérer les événements qui se produisent n'importe où dans la portée spécifiée. Par exemple :

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

La distinction clé est que dans le cas 1, chaque travée est directement responsable de la gestion de ses propres événements. Dans le cas 2, l'élément conteneur (div#target) se voit déléguer la responsabilité de gérer les événements pour ses éléments enfants (span.green).

Exemple de comparaison

Le L'exemple fourni montre les différences entre la gestion directe et déléguée des événements dans le contexte du clic sur des étendues vertes dans un div#target. Les deux méthodes obtiennent le même comportement d'alerte de la classe de l'étendue cliquée.

Approche directe :

• Chaque étendue verte est liée à son propre gestionnaire d'événements de clic.
• Les nouvelles étendues vertes créées dans div#target ne seront pas liées au gestionnaire d'événements. eux.

Approche déléguée :

• Le gestionnaire d'événements est lié à div#target, avec span.green comme sélecteur délégué.
• Les clics sur les étendues vertes existantes ou futures au sein de div#target seront traités.
• Le div#target est responsable de la gestion des événements au nom de tous ses éléments enfants qui correspondent à span.green.

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!