Instance de délégation d'événements jQuery Analysis

Instance de délégation d'événements jQuery Analysis_jquery

WBOY

Libérer： 2016-05-16 15:50:14

original

1514 Les gens l'ont consulté

La délégation d'événements est principalement mise en œuvre en utilisant le phénomène de bouillonnement d'événements. Une maîtrise précise de la délégation d'événements peut aider à améliorer l'efficacité de l'exécution du code. Regardons d'abord un exemple de code :

<!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>

Copier après la connexion

Dans le code ci-dessus, la méthode bind() est utilisée pour lier un gestionnaire d'événements de clic à chaque td, de sorte que lorsque l'on clique sur la cellule, le texte de la cellule sera réinitialisé. Bien que cette méthode produise l'effet souhaité et semble très parfaite, ce n'est pas le cas s'il y a trop de cellules, parcourir les cellules et lier les fonctions de traitement d'événements à chaque cellule réduira considérablement les performances du code. élément de la cellule pour écouter l'événement, il vous suffit de déterminer si l'élément DOM qui a initialement déclenché l'événement est td.

Le code est modifié comme suit :

<!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>

Copier après la connexion

Le code ci-dessus implémente la même fonction, mais l'efficacité est grandement améliorée.

Résumé : ce qu'on appelle la délégation d'événement signifie que la cible de l'événement ne traite pas l'événement elle-même, mais délègue la tâche de traitement à son élément parent ou à son élément ancêtre, voire à l'élément racine.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.