Comment puis-je attribuer efficacement des gestionnaires d'événements à des éléments générés dynamiquement en JavaScript ?

Comment générer efficacement des gestionnaires d'événements à l'aide de boucles en JavaScript

Supposons que vous ayez généré dynamiquement des éléments dans votre document HTML, tels que plusieurs balises d'ancrage . Pour attribuer des gestionnaires d'événements à chacun de ces éléments, vous pouvez envisager d'utiliser une boucle similaire à la suivante :

for(i=1; i<11; i++) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    }
}

Cependant, cette approche ne donne pas le comportement souhaité car tous les gestionnaires partagent la même variable i. . Par conséquent, seul le dernier gestionnaire sera attribué et il alertera toujours la valeur "11".

Pour surmonter ce problème, vous pouvez utiliser une fonction distincte pour chaque gestionnaire qui prend i comme argument. Cela garantit que chaque gestionnaire a sa propre variable i :

function handleElement(i) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    };
}

for(i=1; i<11; i++)
    handleElement(i);

En utilisant cette technique, chaque gestionnaire se voit attribuer sa valeur unique de i, et le comportement souhaité est obtenu, chaque gestionnaire alertant de la valeur correcte ( 1 à 10).

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!