jQuery的事件委托實例分析

更新時間：2015年07月15日 10:15:49 投稿：hebedich

本文通過具體的實例向我們簡單介紹了jQuery的事件委托的實現(xiàn)方式，十分的簡單實用，有需要的小伙伴可以參考下。

事件委托主要是利用事件冒泡現(xiàn)象來實現(xiàn)的，對于事件委托的精準(zhǔn)的掌握，可以有利于提高代碼的執(zhí)行效率。先看一段代碼實例:

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

在以上代碼中，使用bind()方法為每一個td綁定了一個click事件處理函數(shù)，這樣當(dāng)點擊單元格的時候，就會重新設(shè)置單元格中的文本。雖然此中方式實現(xiàn)了需要的效果，看起來非常的完美，其實并非這樣，如果當(dāng)單元格非常多時候，遍歷單元格和為每一個單元格綁定事件處理函數(shù)將會大大降低代碼的性能，如果讓單元格的父元素監(jiān)聽事件，只要判斷最初觸發(fā)事件的DOM元素是否是td即可。

代碼修改如下:

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

以上代碼實現(xiàn)了相同的功能，但是效率卻大大提高了。

總結(jié):所謂的事件委托，就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: