事件代理是一种利用事件冒泡机制的技术,
通过将事件处理程序添加到父元素而不是每个子元素上,来管理子元素的事件触发。
通过这种方式,可以避免给每个子元素都绑定事件处理程序,从而提高性能并简化代码结构。
<body>
<ul id="parent-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 获取父元素
var parentList = document.getElementById('parent-list');
// 添加事件代理,将事件处理程序绑定在父元素上
parentList.addEventListener('click', function (event) {
if (event.target.tagName === 'LI') {
console.log('You clicked on: ', event.target.textContent);
}
});
// 我们将 click 事件处理程序绑定在父元素 ul 元素上,而不是每个 li 子元素上。
// 当点击 li 元素时,事件会冒泡至 父元素 ul,
// 父元素上的事件处理程序会捕获到事件并判断点击的是哪个子元素,然后执行相应的操作。
</script>
<!-- 个人总结:
使用事件代理的好处包括:
1. 减少内存占用:不需要为每个子元素都绑定事件处理程序,减少了内存占用。
2. 动态元素支持:对于动态添加的子元素,仍然可以通过事件代理来进行事件管理。
3. 简化代码结构:统一管理事件处理程序,使代码更加简洁清晰。减少dom操作
-->
</body>
注: 博主每天记录自己所学,如有写的不好之处,希望您能不吝赐教,给我一些关于这个项目的意见和建议。各位的宝贵意见将对我产生深远的影响,我将认真倾听并尽力改进。谢谢各位~~