analisis_jquery contoh perwakilan acara jQuery-tutorial js-php.cn

analisis_jquery contoh perwakilan acara jQuery

WBOY

Lepaskan： 2016-05-16 15:50:14

asal

1486 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.