Conseil éclair Délégation d'événement JavaScript en 4 minutes

La délégation d'événements peut être un sujet déroutant pour ceux qui ne connaissent pas le concept. Mais heureusement, c'est très simple. Dans ce tutoriel vidéo, je vais vous présenter le concept en moins de quatre minutes..

Entrez la délégation d'événement

Au lieu de cela, avec la délégation d'événement, nous ajoutons simplement un écouteur d'événement unique à un élément ancêtre, peut-être quelque chose comme un "ul". Ensuite, lorsque l'utilisateur clique sur l'un de ses éléments enfants, comme une balise d'ancrage, nous vérifions uniquement si la cible du clic était bien une balise d'ancrage. Si c'était le cas, nous procédons comme d'habitude.

$ ('ul'). click (fonction (e) if ($ (e.target) .is ('a')) alert ('cliqué'););

Avantages

• N'attachez qu'un seul auditeur d'événement à la page, au lieu de cinq cents (dans notre exemple)
• Les éléments créés dynamiquement seront toujours liés au gestionnaire d'événements..

Pourquoi ça marche?

Cela fonctionne à cause de la façon dont les éléments sont capturés (pas IE) et bouillonnent. Par exemple, considérons la structure simple suivante.

 
Ancre
 

Lorsque vous cliquez sur la balise d'ancrage, vous cliquez également sur les éléments 'li' et 'ul' et même sur 'body'. C'est ce qu'on appelle bouillonner.

Notes sur ce screencast

Veuillez garder à l'esprit qu'il ne s'agit que d'un exemple simple pour expliquer la fonctionnalité. Nous avons utilisé jQuery, uniquement parce que j’avais quatre minutes pour enregistrer! Dans cet exemple particulier (regardez le screencast en premier), nous aurions pu utiliser deux options:

1. Passez true en tant que paramètre de la méthode clone (). Ceci clonerait alors l'élément, ainsi que tous les gestionnaires d'événements..
2. Utilisez plutôt la méthode live (). Cependant, soyez prudent lorsque vous utilisez cette méthode: elle rattache le gestionnaire d'événements X fois. Cela peut ne pas être nécessairement nécessaire.

Cela visait principalement à démontrer l'idée. Avec JavaScript, vous pouvez faire quelque chose comme:

// Obtient une liste non ordonnée contenant les balises d'ancrage var ul = document.getElementById ('items'); // Gestionnaire d'évènements inter-navigateurs simple et rapide - pour compenser la fonction de gestionnaire d'attachement d'IE d'Internet addEvent (obj, evt, fn, capture) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  else if (! capture) capture = false; // capture obj.addEventListener (evt, fn, capture) // Vérifiez si le noeud sur lequel vous avez cliqué est une balise d'ancrage. Si c'est le cas, procédez comme d'habitude. addEvent (ul, "click", function (e) // Firefox et IE ont respectivement accès à l'élément cible. e.target et event.srcElement, respectivement. var target = e? e.target: window.event.srcElement; if (target.nodeName.toLowerCase () === 'a') alert ("clicked"); renvoyer false;);

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..