js进阶---12-12、jquery事件委托怎么使用
2024-10-20 20:31:45
js进阶---12-12、jquery事件委托怎么使用
一、总结
一句话总结：通过on方法（事件委托），给要绑定事件的元素的祖先绑定事件，从而达到效果。
1、事件委托是什么？
通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。
//使用事件委托，只在table上绑定一次事件
//可以动态绑定事件
$('table').on('click','td',function(){
//$(this).css('background','orange')
alert('click_td')
})
2、事件委托的优势是什么？
给动态元素添加事件
事件只绑定一次，效率高（对于同类大量元素需要绑定，效率非常高，比如一个表格2500td，要给每个td绑定事件）
//使用事件委托，只在table上绑定一次事件
//可以动态绑定事件
$('table').on('click','td',function(){
//$(this).css('background','orange')
alert('click_td')
})
3、事件委托的监听对象是谁（事件委托的对象是谁）？
要执行事件他祖先，比如要给大量td绑定事件，事件委托的对象就是它爷爷，也就是table表
//使用事件委托，只在table上绑定一次事件
//可以动态绑定事件
$('table').on('click','td',function(){
//$(this).css('background','orange')
alert('click_td')
})
4、代码添加的元素和动态添加的元素的区别？
代码生成元素的添加事件的代码要在代码生成之后，这样他是可以绑定事件的
//如果不是动态创建的，可以直接绑定事件
$('<div></div>').appendTo($('body'))
$('<div></div>').appendTo($('body'))
$('<div></div>').appendTo($('body'))
$('div').on('click',function(){
$(this).css('background','orange')
})
5、事件委托的使用场景是什么？
一个表格里面有很多td，要给td绑定事件，如果使用给每个td绑定事件的方法，效率非常低，并且容易出错，使用事件委托的话就特别方便了，一步到位。
//使用事件委托，只在table上绑定一次事件
//可以动态绑定事件
$('table').on('click','td',function(){
//$(this).css('background','orange')
alert('click_td')
})
6、如何动态给表格添加行列？
html代码+append方法
$('#btn1').click(function(){
$('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
})
二、jquery事件委托怎么使用
1、相关知识
事件委托
通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。
2、代码
<!DOCTYPE html>
<html lang="en">
<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>
给动态元素添加事件
事件只绑定一次，效率高
最新文章
- .Net 闭包理解
- js简单放羊式单元测试-上
- android夜间模式实现
- Java第一个程序
- 方正S4101g笔记本电脑搜不到无线网络
- 【转】C#取硬盘、CPU、主板、网卡的序号 ManagementObjectSearcher
- 06socket编程
- EJB--事务管理 .
- 10、TV UI
- 求解：C#.Net 远程方法调用失败 (Exception from HRESULT: 0x800706BE)
- WebApi2官网学习记录---异常处理
- Python并发编程之实战异步IO框架：asyncio 下篇（十一）
- Java线程状态转换
- AJax提交表单数据到后台springmvc接收
- 20165213 Exp5 MSF基础应用
- redis_key键
- mysql 的安装,密码及修改 ,权限,基础语句(增删改查)
- iphoneX 适配
- SCCM2007日志文件
- Mybatis 原始dao CRUD方法