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

526

Y a-t-il une différence entre le code suivant?

$('#whatever').on('click', function() {
     /* your code here */
});

et

$('#whatever').click(function() {
     /* your code here */
});

jquery click bgcode
la source

762

Je pense que la différence réside dans les modèles d'utilisation.

Je préférerais .onplus .clickparce que le premier peut utiliser moins de mémoire et travailler pour des éléments ajoutés dynamiquement.

Considérez le code HTML suivant:

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

où nous ajoutons de nouveaux boutons via

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

et veulent "Alerte!" pour afficher une alerte. Nous pouvons utiliser "cliquer" ou "sur" pour cela.

Quand nous utilisons `click`

$("button.alert").click(function() {
    alert(1);
});

avec ce qui précède, un gestionnaire distinct est créé pour chaque élément unique qui correspond au sélecteur. Cela signifie

de nombreux éléments correspondants créeraient de nombreux gestionnaires identiques et augmenteraient ainsi l'empreinte mémoire
les éléments ajoutés dynamiquement n'auront pas le gestionnaire - c'est-à-dire, dans le html ci-dessus le "Alert!" nouvellement ajouté les boutons ne fonctionneront que si vous reliez le gestionnaire.

Quand nous utilisons `.on`

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

avec ce qui précède, un gestionnaire unique pour tous les éléments qui correspondent à votre sélecteur, y compris ceux créés dynamiquement.

... une autre raison d'utiliser `.on`

Comme l'a commenté Adrien ci-dessous, une autre raison d'utiliser .onest les événements à espace de noms.

Si vous ajoutez un gestionnaire avec .on("click", handler)vous, supprimez-le normalement avec .off("click", handler)ce qui supprimera ce gestionnaire même. Évidemment, cela ne fonctionne que si vous avez une référence à la fonction, et si vous n'en avez pas? Vous utilisez des espaces de noms:

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

avec reliure via

$("#element").off("click.someNamespace");

andreister
la source

2

Qu'en est-il de: $ ('button.alert'). On ('click', function () {alert (1);}); ?

Matthew

8

@andreister: corrigez-moi si je me trompe mais je crois qu'un autre avantage est l'utilisation des espaces de noms lors de l'utilisation on('click' ...), voir stackoverflow.com/a/3973060/759452 ie. on('click.darkenallothersections' ...)et en même temps on('click.displaynextstep' ...), alors je ne peux délier que celui que je choisis en utilisant.unbind('click.displaynextstep')

Adrien Be

Je ne pense pas qu'un gestionnaire distinct soit créé pour chaque élément qui correspond au sélecteur. Je pense qu'un gestionnaire serait créé, mais que la surcharge vient de la liaison de ce gestionnaire à plusieurs éléments et de la surveillance de tous ces éléments. Au moins, je ne l'ai pas trouvé dans la documentation.

Trace le

7

Quelqu'un peut-il expliquer pourquoi .on peut fonctionner pour un élément ajouté dynamiquement mais pas .click?

MengT

2

on()est la tendance de jQuery. Je devais mise à jour $(window).load(function() {});à $(window).on("load", function (e) {})quand je suis passé à jQuery 3.

Victor Stoddard

37

Y a-t-il une différence entre le code suivant?

Non, il n'y a aucune différence fonctionnelle entre les deux exemples de code dans votre question. .click(fn)est une "méthode de raccourci" pour .on("click", fn). De la documentation de.on() :

Il existe des méthodes abrégées pour certains événements, telles que celles .click()qui peuvent être utilisées pour attacher ou déclencher des gestionnaires d'événements. Pour une liste complète des méthodes abrégées, voir la catégorie des événements .

Notez que cela .on()diffère du .click()fait qu'il a la possibilité de créer des gestionnaires d'événements délégués en passant un selectorparamètre, alors .click()qu'il ne le fait pas. Quand .on()est appelé sansselector paramètre, il se comporte exactement de la même manière que .click(). Si vous souhaitez une délégation d'événement, utilisez .on().

gilly3
la source

4

qu'en est-il du problème de performances a souligné mon @andreister?

rubo77

@ rubo77 négligeable au mieux. Nous prenons des millisecondes à un chiffre.

Rory McCrossan

1

@RoryMcCrossan, c'est un gros problème pour moi - je le cherche parce que j'ai jusqu'à 3000 questions sur une page qui ont besoin d'événements. Un milisec chacun rend ma page plus longue de 3 secondes. Votre commentaire n'est pas utile pour les grandes listes.

Randy

11

Le plus gros problème est pourquoi vous avez 3000 questions sur une page. Si vous suivez de bons modèles d'interface utilisateur, vous ne devriez jamais avoir autant d'informations sur une page. Examinez la pagination ou le chargement paresseux. Même l'utilisation de la délégation d'événements pour avoir un seul gestionnaire d'événements pour tous ces éléments serait préférable.

Rory McCrossan

5

@ rubo77 - Le gain de performances n'est visible que lors de l'utilisation de la délégation d'événements en passant un selectorparamètre. Si vous appelez .on()sans selectorparamètre, il n'y a aucune amélioration des performances par rapport à l'utilisation .click().

gilly3

23

.on()est la méthode recommandée pour effectuer toutes vos liaisons d'événements à partir de jQuery 1.7. Il regroupe toutes les fonctionnalités des deux .bind()et .live()en une seule fonction qui modifie le comportement lorsque vous lui passez différents paramètres.

Comme vous avez écrit votre exemple, il n'y a aucune différence entre les deux. Les deux lient un gestionnaire à l' clickévénement de #whatever. on()offre une flexibilité supplémentaire en vous permettant de déléguer des événements déclenchés par des enfants #whateverà une seule fonction de gestionnaire, si vous le souhaitez.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

Interrobang
la source

"Lier à tous les liens à l'intérieur de # quoi que ce soit, même les nouveaux créés plus tard." N'est-ce pas exactement ce que .live()fait? En outre, cela semble contredire les autres réponses qui disent qu'il n'a que la fonctionnalité de .click(), et ne s'applique donc pas aux événements futurs.

bgcode

3

@babonk - Cela ne contredit pas les autres réponses, car comme Interrobang l'a dit dans le premier paragraphe .on()peut faire ce qui .click()fait et faire quoi .bind()et .live()faire - cela dépend des paramètres avec lesquels vous l'appelez. (Certaines autres réponses le mentionnent également.) Notez cependant que "Lier à tous les liens à l'intérieur de # quoi que ce soit" n'est pas ce qui .live()fait, c'est ce qui .delegate()fait. .live()se lie à tout l'intérieur documentplutôt que de vous laisser spécifier le conteneur. Remarque .live()est également déconseillée à partir de jQuery 1.7.

nnnnnn

+1 pour les événements délégués: "En sélectionnant un élément qui est garanti d'être présent au moment où le gestionnaire d'événements délégué est attaché, vous pouvez utiliser des événements délégués pour éviter d'avoir à attacher et supprimer fréquemment des gestionnaires d'événements." api.jquery.com/on

jimasp

19

Comme mentionné par les autres réponses:

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

Notez cependant que cela .on()prend en charge plusieurs autres combinaisons de paramètres qui .click()ne le font pas, ce qui lui permet de gérer la délégation d'événements (remplaçant .delegate()et .live()).

(Et évidemment, il existe d'autres méthodes de raccourci similaires pour "keyup", "focus", etc.)

La raison pour laquelle je poste une réponse supplémentaire est de mentionner ce qui se passe si vous appelez .click()sans paramètres:

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

Notez que si vous utilisez .trigger()directement, vous pouvez également passer des paramètres supplémentaires ou un objet événement jQuery, ce que vous ne pouvez pas faire .click().

Je voulais également mentionner que si vous regardez le code source jQuery (dans jquery-1.7.1.js), vous verrez qu'en interne la fonction .click()(ou .keyup(), etc.) appellera réellement .on()ou .trigger(). Évidemment, cela signifie que vous pouvez être assuré qu'ils ont vraiment le même résultat, mais cela signifie également que l'utilisation .click()a un tout petit peu plus de frais généraux - pas de quoi s'inquiéter ou même penser dans la plupart des circonstances, mais théoriquement, cela pourrait avoir de l'importance dans des circonstances extraordinaires.

EDIT: Enfin, notez que cela .on()vous permet de lier plusieurs événements à la même fonction sur une seule ligne, par exemple:

$("#whatever").on("click keypress focus", function(){});

nnnnnn
la source

Les méthodes ne sont-elles pas toutes deux chargées en mémoire à utiliser? Donc ça n'a pas d'importance? Et pour la lisibilité, c'est peut-être plus pratique?

Vince V.

@VinceV. - Oui. Pour les gestionnaires d'événements non délégués "standard", les deux méthodes font la même chose et la différence de performances est négligeable, donc la méthode que vous utilisez est vraiment une question de préférence personnelle. (Je choisirais habituellement .click().)

nnnnnn

9

Non, il n'y en a pas.
Le point essentiel on()est ses autres surcharges et la possibilité de gérer des événements qui n'ont pas de méthodes de raccourci.

SLaks
la source

1

@arigold: Ce sont les autres surcharges.

SLaks

9

Ils semblent être les mêmes ... Documentation de la fonction click () :

Cette méthode est un raccourci pour .bind («clic», gestionnaire)

Documentation de la fonction on () :

Depuis jQuery 1.7, la méthode .on () fournit toutes les fonctionnalités requises pour attacher des gestionnaires d'événements. Pour obtenir de l'aide sur la conversion à partir d'anciennes méthodes d'événement jQuery, consultez .bind (), .delegate () et .live (). Pour supprimer les événements liés avec .on (), voir .off ().

dana
la source

Vos deux vues doivent être fusionnées. Click () est un raccourci pour .Bind () et .On () ... Comme pour JQUERY 1.7.0 +, c'est aussi un raccourci pour Trigger ('click'). [ api.jquery.com/click/]

Dhanasekar

Ceci est une explication assez simple de la documentation, mais la réponse ci-dessous a un bon exemple de pourquoi l'un est meilleur que l'autre dans .clickvs.on

phatskat

@phatskat - Il se trouve que je suis d'accord avec vous :)

dana

8

.click les événements ne fonctionnent que lorsque l'élément est rendu et ne sont attachés aux éléments chargés que lorsque le DOM est prêt.

.on les événements sont attachés dynamiquement aux éléments DOM, ce qui est utile lorsque vous souhaitez attacher un événement aux éléments DOM rendus sur demande ajax ou autre chose (une fois que le DOM est prêt).

Ramesh kumar
la source

5

Ici, vous obtiendrez une liste des différentes manières d'appliquer l'événement click. Vous pouvez sélectionner en conséquence comme satisfaisant ou si votre clic ne fonctionne pas, essayez simplement une alternative parmi celles-ci.

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

Mustkeem K
la source

3

Ils ont maintenant déconseillé click (), donc il vaut mieux continuer ('click')

tw0shoes
la source

Alors, que faites-vous si vous voulez maintenant l'ancien comportement click ()?

bgcode

1

Pour autant qu'il ne soit pas connu d'Internet et de certains amis .on () est utilisé lorsque vous ajoutez dynamiquement des éléments. Mais quand je l'ai utilisé dans une simple page de connexion où l'événement click devrait envoyer AJAX à node.js et au retour ajouter de nouveaux éléments, il a commencé à appeler des appels multi-AJAX. Quand je l'ai changé pour cliquer () tout s'est bien passé. En fait, je n'ai pas fait face à ce problème avant.

Alper Bilgil
la source

0

NOUVEAUX ÉLÉMENTS

En complément des réponses complètes ci-dessus pour mettre en évidence les points critiques si vous souhaitez que le clic soit attaché à de nouveaux éléments:

les éléments sélectionnés par le premier sélecteur, par exemple $ ("body") doivent exister au moment de la déclaration sinon il n'y a rien à attacher.
vous devez utiliser les trois arguments de la fonction .on (), y compris le sélecteur valide pour vos éléments cibles comme deuxième argument.

Astra Bear
la source

-1

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

il est plus efficace que $ ('. UPDATE'). click (function () {});
il peut utiliser moins de mémoire et fonctionner pour les éléments ajoutés dynamiquement.
certaines données dynamiques récupérées avec le bouton d'édition et de suppression ne génèrent pas d'événement JQuery au moment de la modification ou de la suppression des données des lignes sous forme, ce temps $(document).on('click','.UPDATE',function(){ });fonctionne efficacement comme les mêmes données récupérées en utilisant jquery. bouton ne fonctionne pas au moment de la mise à jour ou de la suppression:

Devang Hire
la source

$ (document) .on ('click', '. UPDATE', function () {}); 1) il est plus efficace que $ ('. UPDATE'). Click (function () {}); 2) il peut utiliser moins de mémoire et fonctionner pour les éléments ajoutés dynamiquement. 3) certaines données dynamiques récupérées dans le temps avec le bouton modifier et supprimer ne génèrent pas d'événement JQuery au moment de MODIFIER OU SUPPRIMER LES DONNÉES des données de ligne dans le formulaire, cette fois $ (document) .on ('cliquez', '. MISE À JOUR', fonction () {}); est efficace. [comme les mêmes données récupérées en utilisant jquery. bouton ne fonctionne pas au moment de la mise à jour ou de la suppression

Devang Hire

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

Réponses:

Quand nous utilisons click

Quand nous utilisons .on

... une autre raison d'utiliser .on

Quand nous utilisons `click`

Quand nous utilisons `.on`

... une autre raison d'utiliser `.on`