Rumah hujung hadapan web tutorial js Pengenalan kepada isu pendaftaran acara yang disebabkan oleh js closure_Pengetahuan asas

Pengenalan kepada isu pendaftaran acara yang disebabkan oleh js closure_Pengetahuan asas

May 16, 2016 pm 03:07 PM
js penutupan

Latar Belakang: Saya membaca beberapa artikel tentang rantaian dan penutupan skop js pada masa lapang saya, dan secara tidak sengaja melihat masalah yang saya hadapi sebelum ini, iaitu dalam acara Daftar gelung untuk pemandu untuk nod dom, lihat kod di bawah untuk butiran:

<!DOCTYPE html>
<html>
  <head>
    <title>js闭包</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <button id="anchor1">1</button>
    <button id="anchor2">2</button>
    <button id="anchor3">3</button>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <script type="text/javascript">
      function pageLoad(){
        for (var i = 1; i <=3; i++) { 
          var anchor = document.getElementById("anchor" + i);
          anchor.onclick = function () {
            console.log("anchor"+i);
          } 
        } 
      } 
      window.onload = pageLoad; 
    </script>
  </body>
</html>
Salin selepas log masuk

Menurut pemikiran biasa, hasilnya sepatutnya bahawa mengklik 3 butang akan masing-masing menggesa "anchor1", "anchor2", dan "anchor3". butang diklik, "anchor4" akan digesa.

Kenapa ni? Jangan risau, mari analisanya perlahan-lahan Ia termasuk pengetahuan tentang rantaian skop js dan penutupan, jadi saya tidak akan memperkenalkannya secara terperinci di sini.

Mula-mula mari lihat anchor.onclick Apakah ini? Ini adalah pengendali acara DOM tahap 0 Saya juga tahu adakah blogger itu seorang psikopat *************** Apa yang saya ingin katakan ialah anchor.onclick

ialah pengisytiharan pengendali acara, sama seperti var name="Xiao Ming". Ini diisytiharkan, tetapi ia belum dilaksanakan 🎜>

function pageLoad(){
     for (var i = 1; i <=3; i++) { 
       var anchor = document.getElementById("anchor" + i);
         anchor.onclick = function () {
            console.log("anchor"+i);
         } 
         if(i==2){
           debugger;//我们在这里debugger一下,然后在控制台手动触发#anchor1和#anchor2的点击事件
         }
     } 
 } 
 window.onload = pageLoad;
Salin selepas log masuk

Lihat, kami menggunakan penyahpepijat untuk menghentikan gelung apabila i==2, dan kemudian pergi ke konsol untuk mencetuskan peristiwa klik #anchor1 dan #anchor2 secara manual, dan konsol mencetak "anchor2".

Seluruh logiknya lebih kurang seperti ini: anchor.onclick sentiasa menyimpan rujukan i, dan i terus berubah semasa gelung, daripada i=1 kepada i=4 walaupun semasa gelung, anchor.onclick sekali Disimpan (nota perkataan "sekali"),

Terdapat tiga kes 1, 2 dan 3, tetapi akhirnya saya menjadi 4, jadi tidak kira butang mana yang diklik, "anchor4" akan dikeluarkan

Kesimpulan: Pengetahuan rantai skop dan penutupan dalam js sangat penting Walaupun saya tidak bercakap mengenainya di sini, saya sebenarnya takut ia tidak akan dijelaskan dengan jelas dan ia akan mengelirukan semua orang

Pengenalan di atas kepada isu pendaftaran acara yang disebabkan oleh penutupan js adalah semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah maksud penutupan dalam ungkapan lambda C++? Apakah maksud penutupan dalam ungkapan lambda C++? Apr 17, 2024 pm 06:15 PM

Dalam C++, penutupan ialah ungkapan lambda yang boleh mengakses pembolehubah luaran. Untuk membuat penutupan, tangkap pembolehubah luar dalam ungkapan lambda. Penutupan memberikan kelebihan seperti kebolehgunaan semula, penyembunyian maklumat dan penilaian malas. Ia berguna dalam situasi dunia sebenar seperti pengendali acara, di mana penutupan masih boleh mengakses pembolehubah luar walaupun ia dimusnahkan.

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Apakah kelebihan dan kekurangan penutupan dalam fungsi C++? Apakah kelebihan dan kekurangan penutupan dalam fungsi C++? Apr 25, 2024 pm 01:33 PM

Penutupan ialah fungsi bersarang yang boleh mengakses pembolehubah dalam skop fungsi luar Kelebihannya termasuk pengkapsulan data, pengekalan keadaan dan fleksibiliti. Kelemahan termasuk penggunaan memori, kesan prestasi dan kerumitan penyahpepijatan. Selain itu, penutupan boleh mencipta fungsi tanpa nama dan menyerahkannya kepada fungsi lain sebagai panggilan balik atau hujah.

Bagaimana untuk melaksanakan penutupan dalam ungkapan C++ Lambda? Bagaimana untuk melaksanakan penutupan dalam ungkapan C++ Lambda? Jun 01, 2024 pm 05:50 PM

Ungkapan C++ Lambda menyokong penutupan, yang menyimpan pembolehubah skop fungsi dan menjadikannya boleh diakses oleh fungsi. Sintaks ialah [capture-list](parameters)->return-type{function-body}. capture-list mentakrifkan pembolehubah untuk ditangkap Anda boleh menggunakan [=] untuk menangkap semua pembolehubah tempatan mengikut nilai, [&] untuk menangkap semua pembolehubah tempatan melalui rujukan, atau [variable1, variable2,...] untuk menangkap pembolehubah tertentu. Ungkapan Lambda hanya boleh mengakses pembolehubah yang ditangkap tetapi tidak boleh mengubah suai nilai asal.

Selesaikan masalah kebocoran memori yang disebabkan oleh penutupan Selesaikan masalah kebocoran memori yang disebabkan oleh penutupan Feb 18, 2024 pm 03:20 PM

Tajuk: Kebocoran memori disebabkan oleh penutupan dan penyelesaian Pengenalan: Penutupan ialah konsep yang sangat biasa dalam JavaScript, yang membenarkan fungsi dalaman mengakses pembolehubah fungsi luaran. Walau bagaimanapun, penutupan boleh menyebabkan kebocoran memori jika digunakan secara tidak betul. Artikel ini akan meneroka masalah kebocoran memori yang disebabkan oleh penutupan dan menyediakan penyelesaian serta contoh kod khusus. 1. Kebocoran memori disebabkan oleh penutupan Ciri penutupan ialah fungsi dalaman boleh mengakses pembolehubah fungsi luaran, yang bermaksud pembolehubah yang dirujuk dalam penutupan tidak akan dikumpul sampah. Jika digunakan secara tidak betul,

Kesan penunjuk fungsi dan penutupan pada prestasi Golang Kesan penunjuk fungsi dan penutupan pada prestasi Golang Apr 15, 2024 am 10:36 AM

Kesan penunjuk fungsi dan penutupan pada prestasi Go adalah seperti berikut: Penunjuk fungsi: Lebih perlahan sedikit daripada panggilan langsung, tetapi meningkatkan kebolehbacaan dan kebolehgunaan semula. Penutupan: Biasanya lebih perlahan, tetapi merangkumi data dan tingkah laku. Kes praktikal: Penunjuk fungsi boleh mengoptimumkan algoritma pengisihan dan penutupan boleh mencipta pengendali acara, tetapi ia akan membawa kerugian prestasi.

Hubungan antara js dan vue Hubungan antara js dan vue Mar 11, 2024 pm 05:21 PM

Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.

Bagaimanakah penutupan dilaksanakan di Jawa? Bagaimanakah penutupan dilaksanakan di Jawa? May 03, 2024 pm 12:48 PM

Penutupan dalam Java membenarkan fungsi dalaman mengakses pembolehubah skop luar walaupun fungsi luar telah keluar. Dilaksanakan melalui kelas dalaman tanpa nama, kelas dalam memegang rujukan kepada kelas luar dan memastikan pembolehubah luar aktif. Penutupan meningkatkan fleksibiliti kod, tetapi anda perlu sedar tentang risiko kebocoran memori kerana rujukan kepada pembolehubah luaran oleh kelas dalaman tanpa nama memastikan pembolehubah tersebut hidup.

See all articles