首頁 > 開發者 > JavaScript
jQuery的事件委託執行個體分析，jquery委託執行個體分析
事件委託主要是利用事件冒泡現象來實現的，對於事件委託的精準的掌握，可以有利於提高代碼的執行效率。先看一段代碼執行個體:
<!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事件處理函數，這樣當點擊儲存格的時候，就會重新設定儲存格中的文本。雖然此中方式實現了需要的效果，看起來非常的完美，其實並非這樣，如果當儲存格非常多時候，遍曆儲存格和為每一個儲存格綁定事件處理函數將會大大降低代碼的效能，如果讓儲存格的父元素監聽事件，只要判斷最初觸發事件的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>
以上代碼實現了相同的功能，但是效率卻大大提高了。
總結:所謂的事件委託，就是事件目標自身不處理事件，而是把處理任務委託給其父元素或者祖先元素，甚至根項目。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
