性能优化———事件代理


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>

相关阅读:
360反馈可以改变行为吗？
CV计算机视觉每日开源代码Paper with code速览-2023.10.12
三分法，伟大无比的二分法扩展，本节带部分数论问题。
Redis 中的事务分析，Redis 中的事务可以满足ACID属性吗？
Java—Set
什么是云原生？零基础学云原生难吗？
css文本划线效果（text-decoration相关属性详解）
《Python魔法大冒险》005 魔法挑战：自我介绍机器人
Vue 3.0 + vite + axios+PHP跨域问题的解决办法
SpringMVC之CRUD(增删改查)

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