Pourquoi les écouteurs d'événements dans une boucle For ciblent-ils le dernier objet ?

addEventListener Utilisation d'une boucle For et transmission de valeurs

Lorsque vous utilisez une boucle for pour ajouter des écouteurs d'événements à plusieurs objets, le dernier objet devient souvent La cible de tous les déplacements d’auditeurs. Cet article résoudra ce problème et fournira un code corrigé en utilisant des fermetures :

Présentation du problème :

Essayer d'utiliser une boucle pour ajouter des écouteurs d'événements à plusieurs objets, mais finalement tous les auditeurs ciblent le même objet (le dernier).

Code correctif :

La fermeture est un moyen d'éviter de tels problèmes. Le code modifié est le suivant :

// 函数在点击时运行：
function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
}

// 自动加载函数以添加侦听器：
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;
        elem[i].addEventListener("click", function() { makeItHappen(boxa, boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb, boxa); }, false);
    }()); // 立即调用
}

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!