Différence entre .on('click') et .click()

Stalfos
Javascript

Bonjour,

Petite question qui me passe par la tête, que je pose aux ayatollah de JQuery :

Y a-t-il une différence entre :

$(document).on('click','div.maclass',function(){
})

et

$('div.maclass').click(function(){
})

Le premier met le trigger sur l'élément document et le second directement sur la div en question.
Mais le premier parait meilleur puisque si on modifie dynamiquement la div, le trigger reste là.

Je me dis bien que le deuxième est avantageux si on veut virer le trigger en même temps que l'élément sans passer par .off() ... mais ça me parait maigre.

Y a-t-il une subtiliité de performance ? ou autre ?

Merci de vos réponses!

4 réponses

Grafikart
Réponse acceptée

Le premier offre l'avantage de rajouter l'évènement au document et affectera donc les éléments ajouté plus tards, mais rajoute une vérification à faire à chaque clic, et faudra penser à supprimer l'écouteur si on n'en a plus besoin

Le second permet de mettre l'évènement directement sur l'élément (donc plus performant) et l'écouteur est automatiquement supprimé lors de la suppression de l'élément.

Stalfos
Auteur

Okay donc c'est vraiment subtil, j'imagine que niveau performance on parle de microsecondes ? Après si on met tout sur l'element document est-ce que ça peut gnérer des erreurs ou l'alourdir plus que de raison ? S'il se retrouve avec 500 triggers ça va gêner l'éxecution du script ?

ps : merci pour vos réponses, c'est résolu !

betaWeb

Disons que c'est surtout en fonction des cas : si tu charges du contenu HTML dynamiquement (appel AJAX par exemple) et que tu veux binder un event sur ce contenu, il te faudra passer par la fonction $(...).on( ...), la fonction click() s'applique aux éléments présents dans le DOM lors du chargement initial de la page :)
Côté perfs, comme le souligne @Grafikart, l'évènement on() ajoute une vérif' à chaque clic.
Par contre, faire 500 triggers là ça risque de piquer léger. Dans quel cas de figure voudrais-tu en faire autant ?