Pengenalan kepada isu pendaftaran acara yang disebabkan oleh js closure

Pengenalan kepada isu pendaftaran acara yang disebabkan oleh js closure_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 15:07:43

asal

1160 orang telah melayarinya

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.