事件委托主要是利用事件冒泡現(xiàn)象來(lái)實(shí)現(xiàn)的，對(duì)于事件委托的精準(zhǔn)的掌握，可以有利于提高代碼的執(zhí)行效率。先看一段代碼實(shí)例:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>武林網(wǎng)</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()方法為每一個(gè)td綁定了一個(gè)click事件處理函數(shù)，這樣當(dāng)點(diǎn)擊單元格的時(shí)候，就會(huì)重新設(shè)置單元格中的文本。雖然此中方式實(shí)現(xiàn)了需要的效果，看起來(lái)非常的完美，其實(shí)并非這樣，如果當(dāng)單元格非常多時(shí)候，遍歷單元格和為每一個(gè)單元格綁定事件處理函數(shù)將會(huì)大大降低代碼的性能，如果讓單元格的父元素監(jiān)聽(tīng)事件，只要判斷最初觸發(fā)事件的DOM元素是否是td即可。
代碼修改如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>武林網(wǎng)</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>以上代碼實(shí)現(xiàn)了相同的功能，但是效率卻大大提高了。
總結(jié):所謂的事件委托，就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
