Rumah > Artikel > hujung hadapan web > analisis_jquery contoh perwakilan acara jQuery

analisis_jquery contoh perwakilan acara jQuery

WBOYasal: 2016-05-16 15:50:141459semak imbas

Delegasi acara dilaksanakan terutamanya dengan menggunakan fenomena menggelegak acara. Penguasaan tepat delegasi acara boleh membantu meningkatkan kecekapan pelaksanaan kod. Mari lihat contoh kod dahulu:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
table{
 width:300px;
 height:60px;
 background-color:green;
} 
table td{
 background-color:white;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("td").bind("click",function(){
  $(this).text("哈哈");
 })
})
</script>
</head>
<body>
<table cellspacing="1">
 <tr>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
 </tr>
 <tr>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
 </tr>
</table>
</body>
</html>

Dalam kod di atas, kaedah bind() digunakan untuk mengikat pengendali acara klik pada setiap td, supaya apabila sel diklik, teks dalam sel akan ditetapkan semula. Walaupun kaedah ini mencapai kesan yang diingini dan kelihatan sangat sempurna, ia tidak berlaku Jika terdapat terlalu banyak sel, melintasi sel dan mengikat fungsi pemprosesan acara ke setiap sel akan mengurangkan prestasi kod tersebut elemen sel untuk mendengar acara, anda hanya perlu menentukan sama ada elemen DOM yang pada mulanya mencetuskan acara ialah td.

Kod diubah suai seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
table{
 width:300px;
 height:60px;
 background-color:green;
} 
table td{
 background-color:white;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("table").bind("click",function(e){
  var target = e.target;
  $target=$(target);
  if ($target.is("td")){
   $target.text('哈哈');
  }
 })
})
</script>
</head>
<body>
<table cellspacing="1">
 <tr>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
 </tr>
 <tr>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
 </tr>
</table>
</body>
</html>

Kod di atas melaksanakan fungsi yang sama, tetapi kecekapannya bertambah baik.

Ringkasan: Apa yang dipanggil perwakilan acara bermaksud bahawa sasaran acara tidak memproses acara itu sendiri, tetapi mewakilkan tugas pemprosesan kepada elemen induk atau elemen nenek moyangnya, atau malah elemen akar.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

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：Kaedah JavaScript untuk mengisih senarai drop-down values_javascript kemahiranArtikel seterusnya：Kaedah JavaScript untuk mengisih senarai drop-down values_javascript kemahiran

Artikel berkaitan

Lihat lagi