性能优化———事件代理


html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Documenttitle>
	head>
	<body>
		<ul id="ul">
			<li>1li>
			<li>2li>
			<li>3li>
			<li>4li>
			<li>5li>
		ul>
		<script>
			// 给每一个li绑定事件 非常消耗性能
			// const li = document.getElementsByTagName('li')
			// for (var i = 0; i < li.length; i++) {
			// 	li[i].onclick = function (e) {
			// 		console.log(e.target.innerHTML)
			// 	}
			// }
 
			// 可以选择事件代理（事件委托）的方式处理，把事件绑定在子元素的父元素身上
			// 减少了事件注册，极大的提升了性能
			ul.onclick = function (e) {
				if (e.target.nodeName.toLowerCase() === 'li') {
					console.log(e.target.innerHTML)
				}
			}
		script>
	body>
html>

相关阅读:
Go语言实践案例之猜谜游戏｜青训营
ES6中const注意点
适用于ipad2021电容笔有哪些？高性价比的ipad电容笔推荐
Qt实现一个简易截图工具（支持缩放、移动、保存、复制到粘贴板）
通过实例学习：使用Spring Cache实现实际场景的缓存策略
【微信小程序】用painter插件生成海报分享朋友圈简单教程
丹麦商标申请途径商标注册申请所需文件丹麦商标注册流程
处方识别易语言代码
ZZNUOJ_Java软件的下载安装和写代码
【研0自学100天 —— Day 8 函数定义和声明】

原文地址：https://blog.csdn.net/weixin_63712639/article/details/126375246