Mengapa Pendengar Acara dalam For Loop Menyasarkan Objek Terakhir?

addEventListener Menggunakan For Loop dan Passing Values

Apabila menggunakan gelung for untuk menambah pendengar acara pada berbilang objek, objek terakhir sering menjadi Sasaran untuk semua penempatan semula pendengar. Artikel ini akan menyelesaikan masalah ini dan menyediakan kod yang diperbetulkan menggunakan penutupan:

Gambaran keseluruhan masalah:

Cuba menggunakan gelung untuk menambah pendengar acara pada berbilang objek, Tetapi akhirnya semua pendengar menyasarkan objek yang sama (yang terakhir).

Kod pembetulan:

Penutupan ialah cara untuk mengelakkan masalah sedemikian. Kod yang diubah suai adalah seperti berikut:

// 函数在点击时运行：
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);
    }()); // 立即调用
}

Atas ialah kandungan terperinci Mengapa Pendengar Acara dalam For Loop Menyasarkan Objek Terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!