web-dev-qa-db-fra.com

$ (document) .on ('clic', '#id', fonction () {}) vs $ ('# id'). sur ('clic', fonction () {})

J'essayais de savoir quelle est la différence entre

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

et

$('#id').on('click', function(){});

Je n'ai pas été en mesure de savoir s'il y avait une différence entre les deux et, le cas échéant, quelle pourrait en être cette différence.

Quelqu'un peut-il s'il vous plaît expliquer s'il y a une différence du tout?

jquerysyntax
79
Styphon

Le premier exemple montre délégation d'événements. Le gestionnaire d'événements est lié à un élément situé plus haut dans l'arborescence DOM (dans ce cas, le document) et sera exécuté lorsqu'un événement atteint cet élément ayant pour origine un élément correspondant au sélecteur.

Cela est possible parce que la plupart des événements DOM bulle remontent à partir du point d’origine. Si vous cliquez sur le #id élément, un événement click est généré et apparaîtra dans tous les éléments ancêtres (remarque: il y a en réalité une phase antérieure à celle-ci, appelée "phase de capture"), lorsque l'événement descend dans l'arbre la cible). Vous pouvez capturer l'événement sur n'importe lequel de ces ancêtres.

Le deuxième exemple lie le gestionnaire d'événements directement à l'élément. L'événement continuera à bouillonner (à moins que cela ne soit empêché par le gestionnaire), mais comme le gestionnaire est lié à la cible, vous ne verrez pas les effets de ce processus.

En déléguant un gestionnaire d'événements, vous pouvez vous assurer qu'il est exécuté pour des éléments qui n'existaient pas dans le DOM au moment de la liaison. Si votre #id L'élément _ a été créé après votre deuxième exemple. Votre gestionnaire ne s'exécutera jamais. En vous liant à un élément dont vous savez qu'il est définitivement dans le DOM au moment de l'exécution, vous vous assurez que votre gestionnaire sera réellement attaché à quelque chose et qu'il pourra être exécuté selon les besoins ultérieurement.

64
James Allardice

Considérer le code suivant

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

Maintenant, voici la différence

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

Maintenant, si nous ajoutons une tâche myTask?

$('#myTask').append('<li>Answer this question on SO</li>');

Le fait de cliquer sur cet élément ma tâche ne le supprimera pas de la liste car aucun gestionnaire d'événements n'est lié à celui-ci. Si au lieu de cela nous utilisions .on, Le nouvel élément fonctionnerait sans effort supplémentaire de notre part. Voici à quoi ressemblerait la version .on:

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

Résumé:

La différence entre .on() et .click() serait que .click() ne fonctionnerait peut-être pas lorsque les éléments DOM associés à l'événement .click() seraient ajoutés dynamiquement à un point ultérieur pendant que .on() peut être utilisé dans des situations où les éléments DOM associés à l'appel .on() peuvent être générés de manière dynamique à un point ultérieur.

12
Bhushan Firake