jQuery事件委托

最新推荐文章于 2024-10-06 15:00:00 发布

小歘欻

最新推荐文章于 2024-10-06 15:00:00 发布

阅读量347

点赞数

分类专栏： HTML 文章标签： html5 javascript jquery css

本文链接：https://blog.csdn.net/qq_33840688/article/details/118876536

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

事件委托原理：事件冒泡机制；

优点：

1、可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错；

2、可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为适合；

缺点：

1、基于冒泡机制，对于不冒泡的事件无效。

2、绑定事件委托的层级过多，容易在某层被阻断或出现事件误判。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			// 这样写耗性能
			$(function(){
				$('.list1').delegate('li','click',function(ev,i){
					$(this).css('color', 'yellow')
				})
				
			})
			// 事件委托 将事件委托给.list 让.list来判断怎么做 第一个参数写标签 第二个些事件
			// 事件委托 节省性能 新加的元素也能有效果 
			
		</script>
	</head>
	<body>
		<ul class="list1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>