31jquery事件委托

1.jQuery事件委托

  1. 什么是事件委托

请别人帮忙做事情,然后将做完的结果返回给我们,具体来说事件委托就是元素目标自身不处理的事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)

  1. 为什么要用事件委托

比如给一个ul里面的几个li添加额事件,但是如果动态又生成了li则刚刚生成的li就不具备事件,这时就需要用到事件委托

  1. 事件委托原理

事件委托就是利用事件冒泡原理实现的!
复习一下什么是事件冒泡:就是事件从最深姐弟啊开始,然后逐步向上传播事件
例如:页面上有一个节点树:div > ul > li > a
比如给最里面的a加一个click事件,那么事件就会一层一层的往外执行,执行顺序a > li > ul > div 有这样一个机制,当我们给最外层的div添加点击事件,那么里面的ul li a 做点击事件的时候,都会冒泡到最外层的div上,所以都会被触发。点他爸爸,儿子就出来了嘛

  1. 程序代码段解释
$("ul").delegate("li","click",function(){
					console.log($(this).html());
				})

打住:现在就会有小友问了为什么这个地方的this拿到的是li呢,你不是用ul来监听的这个click事件嘛?为什么能拿到li呢?
哈哈哈 很简单哦 事件冒泡嘛,你点击li,li没有click事件,事件冒泡向上传递,向上传递传递给ul,ul有click事件,ul一有响应了click事件,相应这个事件为什么能拿到this,因为它就是从你点的那个传下来的,this就是你点的那个。

2.多说太枯燥,看代码理解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件委托</title>
		<script src="js/Jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				/*
				 * 1.什么是事件委托:请别人帮忙做事情,然后将做完的结果返回给我们
				 * 
				 * */
				$("button").click(function(){
					$("ul").append("<li>我是新增的li</li>");
				});
				//在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候呢
				//jQuery回遍历所有找到的元素,给所有找到的元素添加事件
//				$("ul>li").click(function(){
//					console.log($(this).html());
//				});
				$("ul").delegate("li","click",function(){
					//打住:现在就会有小友问了为什么这个地方的this拿到的是li呢,你不是用ul来监听的这个click事件嘛?为什么能拿到li呢?
					//哈哈哈 很简单哦 事件冒泡嘛,你点击li,li没有click事件,事件冒泡向上传递,向上传递传递给ul,ul有click事件,ul一有响应了click事件,相应这个事件为什么能拿到this,因为它就是从你点的那个传下来的,this就是你点的那个。
					console.log($(this).html());
				})
			});
		</script>
	</head>
	<body>
		<ul>
			<li>我是第1个li</li>
			<li>我是第2个li</li>
			<li>我是第3个li</li>
		</ul>
		<button>新增一个li</button>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值