Bagaimanakah Saya Boleh Menetapkan Pengendali Acara dengan Cekap kepada Elemen Dijana Secara Dinamik dalam JavaScript?

Cara Menjana Pengendali Acara dengan Cekap Menggunakan Gelung dalam JavaScript

Andaikan anda telah menjana elemen secara dinamik dalam dokumen HTML anda, seperti berbilang tag anchor . Untuk menetapkan pengendali acara kepada setiap elemen ini, anda mungkin mempertimbangkan untuk menggunakan gelung yang serupa dengan yang berikut:

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

Walau bagaimanapun, pendekatan ini tidak menghasilkan gelagat yang diingini kerana semua pengendali berkongsi pembolehubah i yang sama . Akibatnya, hanya pengendali terakhir akan diberikan dan ia akan sentiasa memaklumkan nilai "11."

Untuk mengatasi isu ini, anda boleh menggunakan fungsi berasingan untuk setiap pengendali yang mengambil i sebagai hujah. Ini memastikan bahawa setiap pengendali mempunyai pembolehubah i sendiri:

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

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

Dengan menggunakan teknik ini, setiap pengendali diberikan nilai uniknya iaitu i, dan tingkah laku yang diingini dicapai, dengan setiap pengendali memaklumkan nilai yang betul ( 1 hingga 10).

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Pengendali Acara dengan Cekap kepada Elemen Dijana Secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!