Référence de performance JavaScript dans la gestion des événements au niveau du parent pour tous les éléments enfants

Question

La gestion des événements de plusieurs éléments enfants en phase de bouillonnement au niveau du noeud parent est courante. Cependant, je ne suis pas sûr s'il y a des problèmes de performance. Par exemple, tenez compte de la structure suivante:

<div id="parent"> 
    <div>child1</div> 
    <div>child2</div> 
    <div>child3</div> 
</div> 

maintenant Si je veux gérer onclick sur chacun des Childs, je peux joindre le gestionnaire à chaque div enfant ou un seul gestionnaire à la div parent comme l'événement va éclater.

Alors, si c'était curieux, quelle est la meilleure pratique? Y a-t-il des problèmes de performance dans les deux approches?

Answer 1

Si vous avez un grand nombre d'enfants, je vous recommande d'opter pour Event Delegation. Par expérience, je peux vous dire que l'ajout de gestionnaires d'événements à un très grand nombre d'éléments peut vous donner des problèmes de performances, des fuites de mémoire et des verrous de navigateur (principalement dans IE).

La délégation d'événements dans ces cas est une alternative très simple, légère et bonne.