Gestion directe ou déléguée des événements dans jQuery : quand dois-je utiliser lequel ?

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

Lors de l'utilisation de la méthode jQuery .on() pour la gestion des événements, il y a est une différence fondamentale entre les gestionnaires d'événements directs et délégués.

Les gestionnaires d'événements directs, comme leur nom l'indique, attachent les écouteurs d'événements directement à des éléments. Par exemple :

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

Dans ce scénario, l'écouteur d'événement click est directement lié à chaque élément span.green dans le conteneur div#target.

Les gestionnaires d'événements délégués, en revanche , attachez des écouteurs d'événements à un élément parent et déléguez la gestion des événements aux éléments descendants qui correspondent à un sélecteur. Par exemple :

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

Ici, l'écouteur d'événement click est attaché au conteneur div#target, qui délègue ensuite la gestion des clics à tous les éléments span.green descendants.

La clé La distinction est que dans la gestion déléguée des événements, le gestionnaire n'est pas appelé si l'événement se produit directement sur l'élément parent. Au lieu de cela, l'événement remonte dans l'arborescence DOM et le gestionnaire n'est invoqué que pour les éléments descendants qui correspondent au sélecteur fourni. Cela peut être bénéfique pour le contenu dynamique dans lequel de nouveaux éléments peuvent être ajoutés ou supprimés, car l'écouteur d'événement s'appliquera automatiquement à tous les descendants correspondants sans avoir besoin d'une liaison explicite.

Dans l'exemple fourni, les événements directs et délégués les gestionnaires entraînent le même comportement car aucun élément dynamique n’est ajouté ou supprimé. Cependant, si de nouveaux éléments span.green étaient ajoutés dynamiquement à la page, seul le gestionnaire d'événements délégué gérerait leurs événements de clic.

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!