事件委托主要是利用事件冒泡現象來實現的，對于事件委托的精準的掌握，可以有利于提高代碼的執行效率。先看一段代碼實例:
<!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>以上代碼實現了相同的功能，但是效率卻大大提高了。
總結:所謂的事件委托，就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
