这篇文章主要介绍了关于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中文网其他相关文章!