Mengapakah Pendengar Acara dalam Gelung JavaScript Sentiasa Menyasarkan Elemen Terakhir?

Memahami Gelagat Pendengar Acara dalam Gelung

Dalam JavaScript, pendengar acara membenarkan elemen bertindak balas kepada tindakan pengguna. Menggunakan gelung untuk menambah pendengar acara pada berbilang objek boleh menimbulkan kebimbangan tentang fungsi pendengar.

Isu dengan Pendekatan Tradisional

Pertimbangkan situasi berikut: anda cuba menambah klik pendengar acara kepada berbilang elemen dalam kelas "bekas". Walau bagaimanapun, apabila anda menggunakan gelung tradisional, anda dapati bahawa semua pendengar akhirnya menyasarkan elemen terakhir dalam gelung.

Sebab: Penutupan

Tingkah laku ini berlaku disebabkan oleh penutupan dalam JavaScript. Apabila anda menetapkan pembolehubah dalam gelung, mereka merujuk lokasi memori yang sama. Oleh itu, apabila anda cuba mengakses pembolehubah ini dalam fungsi pendengar acara, ia sentiasa merujuk kepada nilai lelaran terakhir.

Penyelesaian: Invokasi Segera

Untuk menyelesaikan masalah ini isu, gunakan invokasi segera dalam gelung. Dengan berbuat demikian, anda mencipta konteks pelaksanaan baharu untuk setiap lelaran, memastikan pembolehubah dalam konteks itu kekal setempat dan tidak terikat pada pembolehubah gelung.

Kod Tetap:

Kod yang diperbetulkan di bawah menggunakan seruan segera untuk mencapai tingkah laku yang diingini:

// Autoloading function to add the listeners:
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);
    }()); // immediate invocation
}

Dalam ini kod diperbetulkan, seruan segera mencipta konteks pelaksanaan baharu untuk setiap lelaran, membenarkan pembolehubah boxa dan boxb mengekalkan nilainya yang betul dalam fungsi pendengar acara.

Atas ialah kandungan terperinci Mengapakah Pendengar Acara dalam Gelung JavaScript Sentiasa Menyasarkan Elemen Terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!