contoh teknologi delegasi acara JavaScript kemahiran analisis_javascript

Artikel ini menganalisis teknologi delegasi acara JavaScript dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Jika terdapat sejumlah besar butang dalam halaman keseluruhan, kami perlu mengikat pengendali acara pada setiap butang Ini akan menjejaskan prestasi.

Pertama sekali, setiap fungsi adalah objek, dan objek akan menduduki banyak memori Lebih banyak objek dalam ingatan, lebih teruk prestasinya

Kedua, peningkatan dalam bilangan lawatan DOM akan menyebabkan pemuatan halaman tertangguh Malah, masih terdapat penyelesaian yang baik untuk menggunakan pengendali acara dengan baik.

Perwakilan acara:

Penyelesaian kepada masalah terlalu ramai pengendali acara ialah teknologi delegasi acara.

Teknologi delegasi acara mengambil kesempatan daripada menggelegak acara. Hanya nyatakan pengendali acara.

Kami boleh mengikat pengendali acara kepada elemen induk yang perlu mencetuskan acara.

<ul id="mylist">    
  <li id="li_1">sdsdsd</li>    
  <li id="li_2">sdsdsd</li>    
  <li id="li_3">sdsdsd</li>
</ul>

Sekarang kita perlu mengikat pengendali acara untuk 3 li ini..

Hanya perlu mengikat pengendali acara di ul.

obj.eventHandler($("mylist"),"click",function(e){
  e = e || window.event;
  switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
 case "li_1":
 alert("li_1");
 break;
 case "li_2":
 alert("li_2");
 break;
 case "li_3":
 alert("li_3");
 break
  }
})

Jika dalam aplikasi web yang kompleks, delegasi acara seperti ini sangat praktikal.

Jika anda tidak menggunakan kaedah ini, mengikatnya satu demi satu akan menghasilkan pengendali acara yang tidak terkira banyaknya.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.