Mengapakah `addEventListener` Memanggil Fungsi Saya Serta-merta dan bukannya pada Pencetus Peristiwa?

"addEventListener Memanggil Fungsi Tanpa Prompt" Diterangkan

Apabila melampirkan pendengar acara pada elemen, kami mahu fungsi itu dilaksanakan hanya apabila peristiwa itu berlaku. Tetapi dalam beberapa kes, mungkin sukar untuk memastikan fungsi itu tidak dipanggil lebih awal.

Pertimbangkan kod HTML berikut:

<span>

Kami ingin menambahkan acara klik pada pautan kedua:

second.addEventListener('click', message_me('shazam'));

di mana 'message_me' ialah fungsi luaran yang memaparkan mesej. Anehnya, kod ini mencetuskan fungsi 'message_me' serta-merta, walaupun sebelum kami mengklik pautan kedua.

Masalahnya

Isunya terletak pada cara JavaScript mengendalikan rujukan fungsi sebagai hujah kedua 'addEventListener'. JavaScript menjangkakan rujukan kepada fungsi, tetapi dalam kod yang bermasalah, fungsi 'message_me('shazam')' dipanggil serta-merta, dan hasilnya diluluskan sebaliknya.

Penyelesaian

Terdapat dua cara untuk menyelesaikan isu ini:

• Buat tanpa nama fungsi: Balut 'message_me' dalam fungsi tanpa nama untuk mengembalikan rujukan fungsi:

second.addEventListener('click', function() {
    message_me('shazam');
});

Penyelesaian ini memastikan 'message_me' dipanggil hanya apabila pautan kedua diklik.

• Kembalikan fungsi daripada 'message_me': Ubah suai 'message_me' untuk mengembalikan rujukan fungsi:

function message_me(m_text) {
    return function() {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

Dalam kes ini, 'addEventListener' menerima rujukan kepada fungsi yang akan dilaksanakan apabila peristiwa klik berlaku.

Atas ialah kandungan terperinci Mengapakah `addEventListener` Memanggil Fungsi Saya Serta-merta dan bukannya pada Pencetus Peristiwa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!