Bagaimana untuk Menetapkan Pengendali Acara dengan Betul kepada Elemen Dijana Secara Dinamik dalam JavaScript Menggunakan Gelung?

Penjanaan Pengendali Acara dengan Gelung dalam Javascript

Apabila bekerja dengan halaman web dinamik, selalunya menjadi perlu untuk menetapkan pengendali acara kepada berbilang elemen yang dijana secara pemrograman. Ini boleh dicapai melalui penggunaan gelung, memastikan pengendalian yang cekap dan berpusat.

Satu senario biasa ialah menjana berbilang teg sauh (a) daripada respons AJAX, di mana setiap teg memerlukan peristiwa onclick yang memaklumkan nombor yang sepadan . Walau bagaimanapun, pendekatan gelung naif seperti berikut mungkin tidak berfungsi seperti yang dimaksudkan:

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

Dalam contoh ini, semua pengendali acara berkongsi pembolehubah i yang sama, yang mengakibatkan pengendali terakhir menulis ganti yang sebelumnya dan memaklumkan " 11" tanpa mengira teg mana yang telah diklik.

Untuk menyelesaikan isu ini, adalah penting untuk membuat penutupan bagi setiap pengendali, memberikan i sebagai parameter. Ini memastikan bahawa setiap fungsi mempunyai nilai i yang tersendiri:

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

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

Dengan penggunaan fungsi handleElement, setiap pengendali acara diberikan i unik, membolehkan mesej amaran yang betul dipaparkan apabila sauh yang sepadan tag diklik.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Pengendali Acara dengan Betul kepada Elemen Dijana Secara Dinamik dalam JavaScript Menggunakan Gelung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!