- beused::事件绑定原理
适用范围:
1. 优点：
- 可以大量节省内存占用，减少事件注册。
- 比如ul上代理所有li的click事件就很不错。
- 可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
2. 缺点：
- 如果把所有事件都用事件代理，可能会出现事件误判。
- 即本不该被触发的事件被绑定上了事件。
3. 场景:
- 对于非常多的, 且动态增删的元素, 想要监听对于这些元素的事件
梗概:
- 一种基于js事件传递机制的技术
- 对于某个目标元素, 需要监听在这个元素上的某个事件
- 不是在目标元素上添加事件监听器, 而是在其父级元素上添加监听器, 然后监听到的时候判断事件的目标元素
示例
<!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>
<style>
ul {
list-style: none;
padding: 0;
}
li {
cursor: pointer;
}
.active {
background-color: lightblue;
}
</style>
</head>
<body>
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const parentList = document.getElementById('parentList');
// 使用事件委托监听ul元素下所有li元素的点击事件
parentList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('active');
}
});
</script>
</body>
</html>在这个示例中，我们使用了事件委托的方式来监听ul元素下所有li元素的点击事件。通过在父级元素上添加事件监听器，可以减少对每个子元素都添加事件监听器的操作，从而节省内存占用并且适应动态增删的元素。