这篇文章主要介绍了关于jquery事件委托如何使用,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
一、总结
一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果。
1、事件委托是什么?
通过事件冒泡,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行处理。
91 //使用事件委托,只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })2、事件委托的优势是什么?
给动态元素添加事件
事件只绑定一次,效率高(对于同类大量元素需要绑定,效率非常高,比如一个表格2500td,要给每个td绑定事件)
91 //使用事件委托,只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })3、事件委托的监听对象是谁(事件委托的对象是谁)?
要执行事件他祖先,比如要给大量td绑定事件,事件委托的对象就是它爷爷,也就是table表
91 //使用事件委托,只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })4、代码添加的元素和动态添加的元素的区别?
代码生成元素的添加事件的代码要在代码生成之后,这样他是可以绑定事件的
73 //如果不是动态创建的,可以直接绑定事件
74 $('').appendTo($('body'))
75 $('').appendTo($('body'))
76 $('').appendTo($('body'))
77 $('p').on('click',function(){
78 $(this).css('background','orange')
79 })5、事件委托的使用场景是什么?
一个表格里面有很多td,要给td绑定事件,如果使用给每个td绑定事件的方法,效率非常低,并且容易出错,使用事件委托的话就特别方便了,一步到位。
91 //使用事件委托,只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })6、如何动态给表格添加行列?
html代码+append方法
87 $('#btn1').click(function(){
88 $(' ').appendTo('table')
89 })二、jquery事件委托怎么使用
1、相关知识
事件委托
通过事件冒泡,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行处理。
2、代码
演示文档
jQuery事件对象
给动态元素添加事件
事件只绑定一次,效率高
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:









