Question Différence entre .on ('click') vs .click ()


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 */
});

433
2018-02-03 00:26


origine


Réponses:


Je pense, la différence est dans les habitudes d'utilisation.

je préférerais .on plus de .click parce que l'ancien pouvez utiliser moins de mémoire et travailler pour les é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 veux "Alert!" pour montrer une alerte. Nous pouvons utiliser "click" ou "on" pour cela.


Lorsque nous utilisons click

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

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

  1. de nombreux éléments correspondants créeraient de nombreux gestionnaires identiques et augmenteraient ainsi l'encombrement de la mémoire
  2. les éléments ajoutés dynamiquement n'auront pas le gestionnaire - c.-à-d., dans le fichier HTML ci-dessus, le nouveau "Alert!" les boutons ne fonctionneront pas sauf si vous reliez le gestionnaire.

Lorsque nous utilisons .on

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

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


... une autre raison d'utiliser .on

Comme Adrien l'a commenté plus bas, une autre raison d'utiliser .on est des événements avec un espace de noms.

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

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

avec déliant via

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

636
2017-08-09 07:52



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

Non, il n'y a pas de 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 pour .on():

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

Notez que .on() diffère de .click() en ce sens qu'il a la capacité de créer gestionnaires d'événements délégués en passant un selector paramètre, alors que .click() ne fait pas. Quand .on() est appelé sans selector paramètre, il se comporte exactement comme .click(). Si vous voulez une délégation d’événement, utilisez .on().


31
2018-02-03 00:31



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

Comme vous avez écrit votre exemple, il n'y a pas de différence entre les deux. Les deux lient un gestionnaire à la 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 de #whatever à une fonction de gestionnaire unique, si vous choisissez.

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

19
2018-02-03 00:30



Comme mentionné par les autres réponses:

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

Notant cependant que .on() prend en charge plusieurs autres combinaisons de paramètres .click() ne permet pas de gérer la délégation d'événement (remplacement .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");

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

Je voulais aussi mentionner que si vous regardez le code source de jQuery (dans jquery-1.7.1.js), vous verrez que le .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 peu plus de frais généraux - pas n'importe quoi à s'inquiéter ou même à penser dans la plupart des circonstances, mais théoriquement cela pourrait avoir son importance dans des circonstances extraordinaires.

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

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

15
2018-02-03 01:46



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


8
2018-02-03 00:28



Ils semblent être les mêmes ... Documentation du Cliquez sur() fonction:

Cette méthode est un raccourci pour .bind ('click', handler)

Documentation de la sur() fonction:

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


7
2018-02-03 00:31



.click les événements ne fonctionnent que lorsque l'élément est rendu et sont uniquement attachés aux éléments chargés 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 qui sont rendus sur une requête ajax ou autre chose (après que le DOM soit prêt).


4
2017-11-29 07:33



Dans la mesure où il a été découvert depuis Internet et certains amis, .on () est utilisé lorsque vous ajoutez dynamiquement des éléments. Mais quand je l'ai utilisé dans une page de connexion simple où l'événement click doit envoyer AJAX à node.js et à l'ajout de nouveaux éléments, il a commencé à appeler des appels multi-AJAX. Quand je l'ai changé pour cliquer sur () tout s'est bien passé. En fait, je n'ai jamais eu à faire face à ce problème auparavant.


0
2017-12-01 06:04



Vous trouverez ici une liste des différentes manières d'appliquer l'événement click. Vous pouvez sélectionner en conséquence comme suaitable ou si vous cliquez ne fonctionne pas juste essayer une alternative parmi ceux-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
})

0
2018-04-16 06:16



$ ('. UPDATE'). Cliquez sur (function () {}); CONTRE    $ (document) .on ('clic', '. UPDATE', function () {});

[entrez la description de l'image ici] [10]


0
2017-07-10 11:52