Bagaimana untuk Mengelakkan Perangkap Penutupan Apabila Menjana Pengendali Acara Secara Dinamik dalam JavaScript?

Cara Menjana Pengendali Acara Secara Dinamik Menggunakan Gelung dalam Javascript

Dalam senario tertentu, ia menjadi perlu untuk menetapkan pengendali acara kepada satu siri elemen dijana secara dinamik melalui Javascript, sering dirujuk sebagai "gelung melalui pengendali acara." Isu ini timbul apabila elemen yang dijana mempunyai fungsi yang serupa dan memerlukan pengendali acara dengan gelagat unik, berbanding menggunakan pengendali acara sebaris.

Pertimbangkan contoh di mana anda mempunyai 10 teg yang dijana daripada respons AJAX, dan anda ingin menetapkan acara onclick kepada setiap satu daripadanya dalam satu gelung. Kod berikut kelihatan seperti penyelesaian yang mudah:

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

Walau bagaimanapun, selepas pelaksanaan, kod ini hanya memberikan acara onclick kepada tag dan memaparkan "11" dalam kotak amaran untuk semua klik. Sebab bagi tingkah laku ini terletak pada fakta bahawa semua pengendali acara berkongsi pembolehubah i yang sama, yang dinaikkan dalam gelung dan akhirnya menunjukkan kepada tag.

Untuk menangani isu ini dan memastikan setiap tag mempunyai pengendali acara uniknya sendiri, anda perlu menentukan fungsi berasingan untuk setiap pengendali dan lulus nilai i sebagai parameter. Dengan berbuat demikian, setiap pengendali akan mempunyai contoh pembolehubah i sendiri, mengekalkan kefungsian yang dimaksudkan:

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

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

Kod yang disemak ini akan menetapkan pengendali acara onclick yang berbeza kepada setiap teg dan apabila tag diklik, nilai i yang betul akan dipaparkan dalam kotak amaran, mencerminkan tingkah laku yang dijangkakan. Teknik ini membolehkan anda menjana pengendali acara secara dinamik untuk satu siri elemen, memastikan pengendalian acara yang betul untuk setiap elemen individu.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Perangkap Penutupan Apabila Menjana Pengendali Acara Secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!