Mengapa Pengendali Acara dalam Gelung JavaScript Merujuk kepada Pembolehubah Yang Sama?

Bekerja dengan Pengendali Acara dalam Gelung JavaScript: Menggunakan Penutupan untuk Pengendalian Acara yang Berbeza

Dalam JavaScript, apabila bekerja dengan kod HTML, pengendali acara bermain peranan penting dalam membolehkan interaksi pengguna dengan halaman web. Walau bagaimanapun, cabaran biasa timbul apabila pengendali acara ini ditakrifkan dalam gelung, yang membawa kepada gelagat yang tidak dijangka.

Untuk menggambarkan isu ini, pertimbangkan coretan kod berikut:

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}

Apabila berlaku perubahan peristiwa dicetuskan untuk elemen, bukti empirikal menunjukkan bahawa nilai yang sama dihantar kepada kaedah onStatusChanged(), tanpa mengira elemen yang mencetuskan peristiwa itu. Tingkah laku ini berpunca daripada cara JavaScript melaksanakan penutupan apabila mentakrifkan pengendali acara.

Khususnya, dalam gelung, penutupan select.onchange = function() merujuk kepada pembolehubah callid dan anotherid, yang membawa nilai yang ditetapkan semasa lelaran terakhir gelung. Akibatnya, apabila sesuatu peristiwa dicetuskan, nilai pembolehubah ini bukanlah yang dikaitkan dengan elemen tetapi sebaliknya yang terbaharu ditetapkan semasa pelaksanaan gelung.

Untuk menangani isu ini, penutupan boleh dilaksanakan untuk menangkap nilai select, callid dan anotherid pada masa definisi pengendali acara. Kod berikut menunjukkan pendekatan ini:

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a)
    {
        return function()
        {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}</code>

Ringkasnya, menggunakan penutupan apabila mentakrifkan pengendali acara dalam gelung JavaScript adalah penting untuk memastikan bahawa fungsi pengendali acara menerima nilai yang sesuai bagi pembolehubah yang terlibat. Amalan ini membolehkan pengendalian acara yang berbeza berdasarkan elemen yang mencetuskan peristiwa.

Atas ialah kandungan terperinci Mengapa Pengendali Acara dalam Gelung JavaScript Merujuk kepada Pembolehubah Yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html for select Event function this issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menyemak sama ada Pembolehubah Memegang Fungsi dalam JavaScript?Artikel seterusnya：Bagaimana untuk menyemak sama ada Pembolehubah Memegang Fungsi dalam JavaScript?

Artikel berkaitan

Lihat lagi

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved