cari

Rumah >hujung hadapan web >tutorial js >Menganalisis isu pendaftaran acara yang disebabkan oleh kemahiran js closure_javascript

Menganalisis isu pendaftaran acara yang disebabkan oleh kemahiran js closure_javascript

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

Latar Belakang: Saya membaca beberapa artikel tentang rantaian skop js dan penutupan pada masa lapang saya, dan secara tidak sengaja melihat masalah yang saya hadapi sebelum ini, iaitu mendaftar pemacu acara untuk nod dom dalam untuk gelung , 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

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

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：Pintu gelongsor berbilang dan kod kesan berbilang tab dilaksanakan oleh jQuery_jqueryArtikel seterusnya：Pintu gelongsor berbilang dan kod kesan berbilang tab dilaksanakan oleh jQuery_jquery

Artikel berkaitan

Lihat lagi