jQuery meilleures pratiques pour DOM transversal

Question

Je jQuery apprends actuellement par CodeSchool.com et ils ont mentionné qu'il est préférable de le faire:

$(document).ready(function() { 
    $(".exampleclass").on('click', 'button', function() { 
     //some method 
    }); 
}); 

plutôt que:

$(document).ready(function() { 
    $(".exampleclass button").on('click', function() { 
     //some method 
    }); 
}); 

Ils ont donné aucun raisonnement pour pourquoi bien. Pour autant que je sache, il semble n'y avoir aucune différence entre les deux, en fait je trouve que ce dernier est plus facile.

Y a-t-il une raison particulière pour laquelle le premier bloc de code est plus acceptable? Est-ce que ça marche plus vite ou avez un avantage particulier?

Answer 1

La principale différence est que le premier est équipé pour gérer les button ajoutés dynamiquement car il suit le modèle de délégation d'événement. La différence fonctionnelle est que le premier associe un gestionnaire de clic à chaque élément button présent dans le dom au point d'exécution du script, auquel cas il associe un seul gestionnaire à l'élément .exampleclass, lorsqu'un événement se produit dans l'élément et il atteint l'élément exampleclass via la propagation d'événement il teste l'élément cible contre le sélecteur passé dans ce cas button si le test est réussi, alors le gestionnaire enregistré est appelé