Explication détaillée de la solution au problème de l'imbrication d'un événement click dans la boucle JavaScript for

Cet article présente principalement la solution consistant à imbriquer un événement click dans la boucle for de JavaScript pour afficher plusieurs valeurs identiques à la fois, ce qui a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur

Regardez d'abord le morceau de code suivant :

for(var i=0; i<10; i++) {
 $(&#39;#ul&#39;).bind(&#39;click&#39;, function() {
  alert(i)
 })
}

Pour ce morceau de code, lorsque vous cliquez sur l'élément avec l'ID "ul", il fera apparaître un pop-up de 10 10. Pourquoi 10 10 apparaissent-ils ?

Tout d'abord, l'événement click dans ce code n'est pas un événement de liaison, mais un événement de liaison de jQuery, il y a donc une différence entre les événements de liaison et les événements ordinaires. Dans un événement normal, si plusieurs événements de clic sont ajoutés à un élément, le dernier écrasera tous les événements de clic précédents, et seul le dernier événement de clic peut être exécuté dans un événement de liaison, quel que soit le nombre de clics. les événements sont liés au même élément, ils seront tous exécutés. En d'autres termes, onclick dans les événements ordinaires ne prend en charge qu'un seul événement et sera écrasé par d'autres événements onclick, tandis que les événements de clic dans la liaison d'événements peuvent ajouter plusieurs événements sans craindre d'être écrasés. Ainsi, il est concevable que lorsque vous cliquez sur l'élément portant l'ID "ul", 10 fenêtres pop-up apparaissent.

Si vous ne le comprenez toujours pas, il sera facile à comprendre après avoir transformé le code.

En fait, le code ci-dessus peut être transformé sous la forme suivante :

// i=0时
$('#ul').bind('click', function() {
  alert(i)
 })
// i=1时
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
// i=10时
$('#ul').bind('click', function() {
  alert(i)
 })

Extension : Le code suivant est une comparaison du code original ci-dessus, explication supplémentaire La différence entre les événements ordinaires et la liaison d'événement

for(var i=0; i<10; i++) {
 document.getElementById(&#39;ul&#39;).onclick = function() {
  alert(i)
 }
}

Résultats en cours d'exécution : 10 fenêtres pop-up

Évidemment, lorsque l'événement de clic est déclenché, 10 fenêtres pop-up apparaîtront. Alors, peut-être avez-vous des questions ? Pourquoi est-ce 10 fois 10 ? Ne devrait-il pas être 0, 1, 2, 3...10 ? Afin de résoudre ce doute, le code original peut être à nouveau transformé :

var i=0
 
$('#ul').bind('click', function() {
  alert(i)
 })
i=1
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
i = 9
$('#ul').bind('click', function() {
  alert(i)
 })

Après la transformation du code original en ceci, il est évident que la valeur finale de i est 9, mais selon le principe de la boucle for, lorsque la boucle atteint Après que i soit 9, i++ sera exécuté, puis il sera jugé que i<10 À ce moment, la condition n'est plus remplie, donc la boucle est terminée et la finale. ma valeur est de 10. Il est alors naturel de comprendre pourquoi le résultat final est de 10 fenêtres pop-up avec un résultat de 10.

Résumé : ce code semble simple, mais il couvre de nombreux points de connaissances tels que la liaison d'événements, les événements ordinaires et les boucles for.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!