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

Question

J'ai cherché à savoir quelle est la différence entre

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

y

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

Je n'ai pas réussi à trouver d'informations sur la différence entre les deux et, le cas échéant, sur la nature de cette différence.

Quelqu'un peut-il expliquer s'il y a une différence quelconque ?

Answer 1

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

Cela est possible parce que la plupart des événements DOM bulle de l'arbre à partir du point d'origine. Si vous cliquez sur l'icône #id un événement de clic est généré qui remontera à travers tous les éléments ancêtres ( note complémentaire : il y a en fait une phase avant celle-ci, appelée "phase de capture", au cours de laquelle l'événement descend de l'arbre jusqu'à 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 sera toujours déclenché (à moins que vous ne l'empêchiez dans 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énement, 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 gestionnaire d'événement #id a été créé après votre deuxième exemple, votre gestionnaire ne s'exécuterait jamais. En vous liant à un élément dont vous savez qu'il se trouve bien dans le DOM au moment de l'exécution, vous vous assurez que votre handler sera effectivement attaché à quelque chose et qu'il pourra être exécuté comme il se doit par la suite.

Answer 2

Considérons le code suivant

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

Voici la différence

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

Maintenant, que se passe-t-il si nous ajoutons à nouveau une myTask ?

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

Le fait de cliquer sur cet élément myTask ne le supprimera pas de la liste, puisqu'il n'est lié à aucun gestionnaire d'événements. Si, à la place, nous avions utilisé .on Le nouvel article fonctionnerait sans aucun 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() peut ne pas fonctionner si les éléments du DOM associés à l'élément .click() sont ajoutés dynamiquement à un moment ultérieur, tandis que les .on() peut être utilisé dans des situations où les éléments DOM associés à l'élément .on() peut être généré dynamiquement à un moment ultérieur.