jquery事件委托如何使用
程序员文章站
2022-04-18 22:25:00
...
这篇文章主要介绍了关于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 $('<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 })
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 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
89 })
二、jquery事件委托怎么使用
1、相关知识
事件委托
通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。
2、代码
<!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事件委托如何使用的详细内容，更多请关注其它相关文章！
上一篇： mysql 弱口令攻击过程详细
下一篇： Linux数组和关联数组详解