1 概念
事件代理(Event Delegation
),又称之为事件委托。是 JavaScript
中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
补充知识
- 事件流:捕获阶段-目标阶段-冒泡阶段
- 阻止事件冒泡 event.stopPropagation()
2 优点
1) 减小内存消耗
使用事件委托可以大量节省内存,减少事件的定义,例如使用事件委托的方式将点击事件绑定到 ul 标签上,就可以实现监听所有 li 标签,简洁、高效。
2) 动态绑定事件
在网页中,有时我们需要动态增加或移除页面中的元素,使用事件委托不需要再为新增的元素绑定事件,也不需要为删除的元素解绑事件。
3 例子
- 事件委托的核心原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点
- event.target 返回触发事件的DOM对象
- 排他思想:先排除其他人,再设置自己的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<script>
// 事件委托的核心原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
// e.target 这个可以得到我们点击的对象
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].style.backgroundColor = '';
}
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
</html>