<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="item">按钮</li>
<li class="item">按钮</li>
<li class="item">按钮</li>
<li class="item">按钮</li>
</ul>
</body>
<script>
// 不使用事件委托，那就要遍历每一个li元素，给每个li元素绑定一个点击事件，
//这样的做法非常耗费内存，如果有100个、1000个li元素，那对性能的影响是非常大的。
window.onload = function () {
let lis = document.getElementsByClassName('item')
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
console.log('用力的点我')
}
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="wrap">
<li class="item">按钮</li>
<li class="item">按钮</li>
<li class="item">按钮</li>
<li class="item">按钮</li>
</ul>
</body>
<script>
window.onload = function () {
let ul = document.getElementById('wrap')
ul.onclick = function (ev) {
// 获取到事件对象
let e = ev || window.event
console.log(ev, window.event);
// 如果点击的元素的calssName为item
if (e.target.className === 'item') {
console.log('用力的点我')
}
}
}
</script>
</html>