31jquery事件委托_事件委托实现点击div下面的ul展示-CSDN博客

本文链接：https://blog.csdn.net/qq_42696432/article/details/102809993

1.jQuery事件委托

什么是事件委托

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

为什么要用事件委托

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

事件委托原理

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

程序代码段解释

$("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>