dom 事件委托
2021-08-29 本文已影响0人
菜鸡前端
1. 作用
事件委托指的是：当事件触发时，把要做的事委托给父元素来处理。在学它的用法之前，先了解一下它的作用：
- 节约内存：不必为子元素都注册事件，JS侧会少一个函数的内存分配。如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的；
- 能为之后新增的DOM元素依然添加事件：如果不这样做，当你新增一个子元素，则需要给子元素添加事件。
2. 演示
<!DOCTYPE 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>事件代理</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<div>3</div>
</ul>
</body>
<script>
function callback(el) {
alert(el.innerHTML);
}
// 1. 非优化
// var nodeList = document.querySelectorAll("li")
// nodeList.forEach(el => {
// el.addEventListener('click', () => {
// callback(el)
// })
// })
// 2. 使用事件代理
// 通过 event.target 可以获取当目标阶段的元素，也就是我们所需的子元素
// event.currentTarget 指向绑定事件的元素
document.querySelector("ul").addEventListener("click", function (e) {
if ("LI" === e.target.tagName) {
callback(e.target)
}
})
</script>
</html>
