jQuery-Ereignisdelegationsinstanzanalysis

jQuery-Ereignisdelegationsinstanzanalysis_jquery

WBOY

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

Original

1485 Leute haben es durchsucht

Die Ereignisdelegierung wird hauptsächlich durch die Nutzung des Event-Bubbling-Phänomens implementiert. Eine genaue Beherrschung der Ereignisdelegierung kann dazu beitragen, die Effizienz der Codeausführung zu verbessern. Schauen wir uns zunächst ein Codebeispiel an:

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

Nach dem Login kopieren

Im obigen Code wird die Methode bind() verwendet, um einen Click-Event-Handler an jedes td zu binden, sodass der Text in der Zelle zurückgesetzt wird, wenn auf die Zelle geklickt wird. Obwohl diese Methode den gewünschten Effekt erzielt und sehr perfekt aussieht, ist dies nicht der Fall, wenn zu viele Zellen vorhanden sind und die Ereignisverarbeitungsfunktionen an jede Zelle gebunden werden Element der Zelle, um das Ereignis abzuhören, müssen Sie nur feststellen, ob das DOM-Element, das das Ereignis ursprünglich ausgelöst hat, td ist.

Der Code wird wie folgt geändert:

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

Nach dem Login kopieren

Der obige Code implementiert dieselbe Funktion, die Effizienz ist jedoch erheblich verbessert.

Zusammenfassung: Die sogenannte Ereignisdelegation bedeutet, dass das Ereignisziel das Ereignis nicht selbst verarbeitet, sondern die Verarbeitungsaufgabe an sein übergeordnetes Element oder Vorgängerelement oder sogar das Wurzelelement delegiert.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.