本文通過具體的實例向我們簡單介紹了jQuery的事件委托的實現(xiàn)方式，十分的簡單實用，有需要的小伙伴可以參考下。
事件委托主要是利用事件冒泡現(xiàn)象來實現(xiàn)的，對于事件委托的精準(zhǔn)的掌握，可以有利于提高代碼的執(zhí)行效率。先看一段代碼實例:
- <!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()方法為每一個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>武林網(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>
以上代碼實現(xiàn)了相同的功能，但是效率卻大大提高了。
總結(jié):所謂的事件委托，就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
新聞熱點
疑難解答
圖片精選
