【JavaScript】事件代理

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

iuukai

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

阅读量92

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45389633/article/details/109387029

版权

JavaScript 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

本文对比了非事件代理方法中逐个为`<li>`元素添加点击事件，与使用事件代理通过父元素捕获冒泡事件的效率差异。通过实例展示了两种技术在JavaScript中的实现，并强调了事件代理在大型DOM结构中的性能优势。

摘要由CSDN通过智能技术生成

1. 非事件代理【影响性能】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		// 非代理（遍历子节点）
		function clickLi() {
			var li = document.querySelectorAll('li');
			for (var i = 0; i < li.length; i++) {
				li[i].addEventListener('click', (function(i) {
					return function() {
						console.log('非代理：', 'index:', i, ', txt:', this.textContent, ';');
					}
				})(i), false);
			}
		}
		clickLi();
	</script>
</body>
</html>

2. 事件代理【利用父节点接收冒泡】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		// 代理（父节点接收）
		function clickUl() {
			var ul = document.querySelector('ul');
			ul.addEventListener('click', function(e) {
				var e = e || window.event;
				var tag = e.target || e.srcElement;
				if (tag.tagName.toLowerCase() === 'li') {
					// var index = [].indexOf.call(document.querySelectorAll('li'), tag);
				
					var list = [].slice.call(document.querySelectorAll('li'));
					var index = list.indexOf(tag);

					console.log('代  理：', 'index:', index, ', txt:', tag.textContent, ';');
				}
			});
		}
		clickUl();
	</script>
</body>
</html>