這篇文章主要介紹了關於jquery事件委託如何使用,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
透過事件冒泡,讓子元素綁定的事件冒泡到父元素(或祖先元素)上,然後再處理。
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
為動態元素新增事件
事件只綁定一次,效率高(對於同類大量元素需要綁定,效率非常高,例如一個表格2500td,要給每個td綁定事件)
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
要執行事件他祖先,例如要給大量td綁定事件,事件委託的物件就是它爺爺,也就是table表
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
程式碼產生元素的新增事件的程式碼要在程式碼產生之後,這樣他是可以綁定事件的
73 //如果不是动态创建的,可以直接绑定事件 74 $('<p></p>').appendTo($('body')) 75 $('<p></p>').appendTo($('body')) 76 $('<p></p>').appendTo($('body')) 77 $('p').on('click',function(){ 78 $(this).css('background','orange') 79 })
一個表格裡面有很多td,要給td綁定事件,如果使用給每個td綁定事件的方法,效率非常低,並且容易出錯,使用事件委託的話就特別方便了,一步到位。
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
html程式碼append方法
87 $('#btn1').click(function(){ 88 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table') 89 })
透過事件冒泡,讓子元素綁定的事件冒泡到父元素(或祖先元素)上,然後再處理。
<!DOCTYPE html> <html> <style> </style> <head> <meta charset="UTF-8"> <title>演示文档</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <style type="text/css"> input{width: 100px;height: 30px;} div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px} td{width: 50px;height: 20px;background: #ccc} </style> </style> </head> <body> <h3>jQuery事件对象</h3> <input id="btn1" type="button" value="事件绑定"><br> <div></div> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <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> <script type="text/javascript"> $(function(){ /* //使用事件委托动态绑定事件 $('#btn1').on('click',function(){ $("<div></div>").appendTo($('body')) }) // $('div').on('click',function(){ // $(this).css('background','orange') // }) $(document).on('click','div',function(){ $(this).css('background','orange') }) //移出事件委托 $(document).off('click','div') //如果不是动态创建的,可以直接绑定事件 $('<div></div>').appendTo($('body')) $('<div></div>').appendTo($('body')) $('<div></div>').appendTo($('body')) $('div').on('click',function(){ $(this).css('background','orange') }) //每一个td绑定一个事件 //不能动态的添加事件,效率低 $('td').on('click',function(){ alert('click_td') }) */ $('#btn1').click(function(){ $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table') }) //使用事件委托,只在table上绑定一次事件 //可以动态绑定事件 $('table').on('click','td',function(){ //$(this).css('background','orange') alert('click_td') }) }) </script> </body> </html>
為動態元素新增事件
事件只綁定一次,效率高
以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!
相關推薦:
Node.js使用superagent模擬GET/POST的請求
以上是jquery事件委託如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!