cari

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

Pengenalan kepada isu pendaftaran acara yang disebabkan oleh js closure_Pengetahuan asas

WBOY
WBOYasal
2016-05-16 15:07:431140semak imbas

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>

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;

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：
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：Tutorial pengaturcaraan berorientasikan objek JavaScriptArtikel seterusnya：Tutorial pengaturcaraan berorientasikan objek JavaScript

Artikel berkaitan

Lihat lagi