Analisis mendalam proksi acara Javascript_Pengetahuan asas

Sejak sekian lama, saya sentiasa merasakan tiada beza antara berlakunya sesuatu peristiwa dan tibanya peristiwa itu.

Baru-baru ini, saya melihat sekali lagi dan mendapati perbezaannya tidaklah begitu besar! Mari lihat bagaimana anda memahaminya.

Untuk memahami apa itu ejen acara, anda perlu memahami dahulu apa itu ejen.

Dari perspektif perniagaan, menjadi ejen bermakna: Saya mempunyai barang, anda tidak mempunyai barang, tetapi saya tidak mempunyai masa atau tenaga untuk menjual semuanya, dan anda mempunyai banyak masa lapang sehinggakan anda hanya mempunyai masa. Jadi, saya mengamanahkan anda untuk membantu saya membelinya, dan kemudian saya akan memberi anda komisen. Dalam proses ini, anda sebenarnya mempunyai barangan.

OK, bagaimana anda memahami maksud istilah ejen acara secara literal? Lebih lanjut mengenai ini kemudian.

1 Mari kita lihat contoh sebenar acara onclik yang mengikat pemula

Jika saya mengikuti tingkah laku saya sebelum ini, bagaimanakah saya akan menambah onlick pada setiap teg li? Mengarut, kalau saya, pastinya mudah dan kasar.
Gelung melalui setiap li dan kemudian ikat mereka semua onlick.

Jadi kod saya sepatutnya kelihatan seperti ini:

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
  　　aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

Nampaknya semuanya baik-baik saja. Walaupun beberapa artikel mengatakan bahawa ini menggunakan prestasi, komputer saya bagus dan saya tidak mengambil berat tentang prestasi anda, jadi saya tidak boleh menganggapnya terlalu serius.

2 Tiba-tiba pada suatu hari, saya mendapati bahawa li baru yang ditambahkan melalui js tidak terikat pada onlcik

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

Kemudian, apabila saya mengklik maomaoliang, ia tidak mengikat onlick saya Mengapa ini?
Oh, ternyata li asal saya dan li yang dijana kemudian tidak berlaku pada masa yang sama Sebelum elemen li baharu dicipta, peristiwa telah ditambahkan pada li sedia ada. Okay, sangat menjengkelkan.

Tiga Bagaimana untuk memecahkannya?

Kemudian, saya membaca beberapa artikel dan mendapati terdapat sesuatu yang dipanggil proksi acara yang boleh digunakan. Saya akan mencubanya! Jadi saya menulis semula sebahagian daripada kod, seperti ini:

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

Akibatnya, mengklik pada li baharu juga mencetuskan fungsi fn. Nah, sebagai badan yang didorong oleh rasa ingin tahu, bagaimana saya tidak boleh meminta penjelasan lanjut? Anda masih perlu lebih praktikal dan memahami misteri di sebaliknya.

Jadi, saya melihat maklumat ejen acara.

Pertama sekali, anda perlu tahu apakah peristiwa menggelegak: apabila peristiwa pada elemen dicetuskan, sebagai contoh, tetikus mengklik butang, peristiwa yang sama akan dicetuskan dalam semua elemen nenek moyang unsur tersebut. Proses ini dipanggil acara menggelegak.

Kemudian, kembali kepada soalan sebelum ini "Bagaimana untuk memahami maksud istilah ejen acara secara literal", siapakah yang menjadi ejen acara tersebut? Atau siapa yang mewakili acara itu?
Mengambil contoh artikel ini, melihat kod yang diubah suai, saya mengikat acara onlick pada tag ul dan bukannya tag li. Jadi, apabila saya mengklik pada mana-mana tag li (sama ada ia dijana secara dinamik atau sedia ada sebelum ini), acara ini seperti gelembung, muncul dan muncul. Dalam keadaan biasa, ul juga akan terikat kepada onclick, dan badan juga akan terikat kepada onclick, yang bermaksud ia akan menggelembung ke elemen paling akar. Tetapi saya telah mengikat onlick dengan ul di sini, jadi pada masa ini, ul akan memintas gelembung, acara akan berhenti meningkat, dan tag badan tidak dapat dicapai.

Kemudian, var target = ev.target ||. Ayat ini bersamaan dengan memberitahu saya siapa yang saya klik dan siapa sasaran. Jika sasaran ini menjadi teg li if (target.nodeName.toLowerCase() == 'li'), kemudian laksanakan fungsi fn.

Akhirnya, saya dengan bangga menjawab soalan itu: jadual mewakili acara onlick!

4 Ingat langkah proksi acara

Acara mengikat unsur induk
Elemen induk mengetahui siapa sasaran sebenar acara itu
Kita perlu menilai sasaran Jika ia adalah elemen yang kita perlukan, fungsi panggil balik akan berlaku (jadi kita mesti belajar cara menggunakan pemilih)

5 Ringkasan akhir, dua faedah utama agensi acara

Prestasi telah dioptimumkan secara tidak sengaja
Elemen yang ditambah secara dinamik juga boleh diikat pada acara

Enam perkara yang perlu diperhatikan ialah

Di atas adalah untuk mengikat acara js asli, jika anda menggunakan jquery. Dan menukar kod kepada yang berikut:

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

Dengan cara ini, tag li yang baru ditambah juga boleh terikat untuk diklik. Bukankah ia sangat mudah dan mudah Adakah anda rasa pembelajaran js tidak berguna?

Haha, perkara biasa untuk berfikir seperti ini Saya pernah berfikir begitu juga, tetapi selepas membuat beberapa perkara, saya mendapati bahawa jquery benar-benar tidak mencukupi! Tetapi ia pada asasnya cukup!

Walaupun master mengatakan bahawa anda perlu belajar js, saya masih fikir anda boleh belajar jquery dahulu, dan kemudian belajar js kemudian, dan kesannya akan menjadi baik.