JavaScript 事件委托就是利用 JavaScript 事件冒泡的特性，将内层元素的事件委托（绑定）给外层元素处理。

通俗的讲，事件委托就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素上。

简单的讲，事件委托就是利用 JavaScript 事件冒泡的特性，将内层元素的事件委托（绑定）给外层元素处理。

一般来讲，事件委托会把一个或者一组元素的事件委托（绑定）到它的父层元素或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<html>
<head>
 <title>普通写法（不使用事件委托）</title>
</head>
<body>
<ul>
	<li>li 1 号</li>
	<li>li 2 号</li>
	<li>li 3 号</li>
	<li>li 4 号</li>
</ul>

<button id="btn">添加</button>

<script>
// 通过标签名获取元素
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");

// 遍历元素给每个元素添加点击事件
for (let i = 0; i < oLi.length; i++) {
	oLi[i].onclick = function() {
		console.log(oLi[i].innerText);
	};
};

// 通过 id 获取 按钮元素
let btn = document.getElementById("btn");

// 给按钮添加点击事件
btn.onclick = function() {
	// 创建新的 li
	let aLi = document.createElement("li");

	// 给 li 赋值
	aLi.innerHTML = `li ${oLi.length+1} 号`;

	// 为新节点单独添加事件
	aLi.onclick = function() {
		console.log(aLi.innerText);
	};

	// 把 li 展示到页面上
	oUl.appendChild(aLi);
};
</script>
</body>
</html>
分析：
从上面的代码可以看到，用 for 循环给相应的 li 添加点击事件，每添加一个就多一次 dom 操作，加上按钮点击总共 5 次。当添加新的 li 元素时，还要给新 li 元素添加点击事件，这无疑有些繁琐，而且 dom 操作的次数没有做优化，显然当页面的 li 元素很多的时候，性能将会受到影响。
————————————————
版权声明：本文为CSDN博主「web晨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_51157081/article/details/115823928
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<html>
<head>
 <title>事件委托写法</title>
</head>
<body>
<ul>
	<li>li 1 号</li>
	<li>li 2 号</li>
	<li>li 3 号</li>
	<li>li 4 号</li>
</ul>

<button id="btn">添加</button>

<script>
// 通过标签名获取元素
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");

// 直接给 ul 添加点击事件
oUl.onclick = function(ev) {
	// ev 对象的兼容处理
	ev = ev || window.event;

	// 通过 ev 对象的 target 找到触发事件的元素    
	// 此操作的作用是：拿到对应的元素
	let target = ev.target || ev.srcElement;

	// 需求中的操作
	// target.nodeName.toLowerCase() 获取元素的操作
	// 写法一
	if (target.nodeName.toLowerCase() == "li") {
		console.log(target.innerText);
	};

	// 写法二
	console.log(target.innerText);
};

// 通过 id 获取 按钮元素
let btn = document.getElementById("btn");

// 为按钮添加点击事件
btn.onclick = function(ev) {
	// 新建 li 元素
	let aLi = document.createElement("li");

	// 给 li 赋值
	aLi.innerHTML = `li ${oLi.length+1} 号`;

	// 直接将新 li 元素放到 ul 上
	oUl.appendChild(aLi);
};
</script>
</body>
</html>

分析：
将上面的代码和普通写法进行比对，显然用事件委托的写法更加的简洁，不仅能减少代码量，同时还能减少 dom 操作次数，实现对性能的优化，简直一举多得。