jQuery添加新的子元素，自动事件响应处理--事件委托

最新推荐文章于 2024-07-24 02:22:17 发布

北上南下.x

最新推荐文章于 2024-07-24 02:22:17 发布

阅读量498

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_44427343/article/details/106461890

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

部分代码：

<body>
	<ul>
		<li>这是一个li</li>
	</ul>
	<button type="button">添加li</button>
	
<script>
	$(function(){
		//添加新的li
		$("button").click(function(){
			$("ul").append("<li>这是新添加的li.....</li>")
		});
		
		//事件委托,li为委托方，ul为被委托方，click为委托的事件，function为回调函数
		$("ul").delegate("li","click",function(){
			$(this).css("background-color","red")
		})
	})	
</script>
</body>

效果如下：
在这里插入图片描述

1、事件委托：

*将多个子元素(li)的事件监听委托给父辈元素(ul)处理

*监听回调是加在了父辈元素上

*当操作任何一个子元素(li)时，事件会冒泡到父辈元素(ul)

*父辈元素不会直接处理事件，而是根报event. target
得到发生事件的于元素(Li),通过这个子元素调用事件回调函数

2、事件委托的两方：

*委托方:业主li

*被委托方:中介ul

3、使用事件委托的好处

*添加新的子元素，自动有事件响应处理

*减少事件监听的: n==>1

4、 jQuery的事件委托API

*设置事件委托: $(parentSelector) . delegate(childrenSelector, eventName, callback)

*移除事件委托: $(parentSelector). undelegate(eventName)

北上南下.x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery添加新的子元素，自动事件响应处理--事件委托

部分代码：<body> <ul> <li>这是一个li</li> </ul> <button type="button">添加li</button> <script> $(function(){ //添加新的li $("button").click(function(){ $("ul").append("<li>这是新添加的li.....</li>")
复制链接

扫一扫

专栏目录