日期：2013-7-5 来源：GBin1.com
想 象一下，如果你有一个无序列表，里面有一堆<li>元素，每一个<li>元素都会在点击的时候触发一个行为。这个时候， 你通常会在每一个元素上添加一个事件监听，但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢？这个时候，你在移除添加元素的同时需要处 理事件监听的移除和添加。这个时候，我们就需要引入事件委托了。
事件委托是在父级元素上添加一个事件监听，来替代在每一个子元素上添加事件监听。当事件被触发时，event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子：
// 获取元素，添加事件监听
document.querySelector('#parent-list').addEventListener('click', function(e) {
// e.target 是一个被点击的元素!
// 如果它是一个列表元素
if(e.target && e.target.tagName == 'LI') {
// 我们找到了这个元素，对他的操作可以写在这里。
}
});
上 面的例子是不可思议的简单，当事件发生的时候，它没有轮询父节点去寻找匹配的元素或选择器，且它不支持基于选择器的查询（例如 用class name，或者id来查询）。所有的JavaScript框架提供了委托选择器匹配。重点是，你避免了为每一个元素加载事件监听，而是在父元素上加一个事 件监听。这样大大的增加了效率，并且减少了很多维护！
下一篇我们将介绍使用Data URI代替图片SRC。
via 极客社区
相关推荐
Web前端性能优化是提升网页用户体验和确保网站成功的关键因素之一。性能优化涉及多个方面，包括但不限于代码优化、资源加载策略、服务器配置等。本篇内容将深入探讨Web前端性能优化的思路与学习方法，结合WebQQ、QQ...
郭碧青是腾讯公司的一位资深前端工程师，他在Web前端性能优化方面有着丰富的实践经验，并且对于性能优化的工作充满热情。郭碧青在行业内的知名度很高，虽然行事低调，但是经常受邀在各种大型会议和技术活动中分享...
使用事件委托：事件委托可以将事件绑定到父元素上，通过事件冒泡机制来处理子元素的事件，减少事件绑定的次数，提高性能。 合理使用定时器：定时器的使用会占用浏览器的计算资源，应该避免过多的定时器的使用，合理...
7. 动态更新DOM的性能优化： - 使用`textContent`而不是`innerHTML`来设置纯文本，以避免解析HTML。 - 使用批量操作（如`innerHTML`或`textContent`）而不是多次单独操作节点。 - 使用事件委托来减少事件监听器的...
web前端优化方案的知识点包括： ...主要手段包括合并CSS、JS和图片，减少...以上是web前端优化方案的主要知识点，从减少HTTP请求到优化JS代码，涵盖了前端性能优化的多个方面，可以帮助提升网站的加载速度和用户体验。
通过上述介绍，我们可以看到，JavaScript性能优化涉及到多个方面，包括变量管理、DOM操作、事件处理、异步编程以及资源加载等。开发者应该根据实际需求选择合适的优化策略，并不断学习新的技术以适应快速发展的前端...
- 使用事件委托，减少事件监听器数量。 - 避免全局查找，提前保存引用，减少查找次数。 - 使用异步加载，避免阻塞页面渲染。 2. CSS优化： - 减少选择器复杂度，提高解析效率。 - 使用CSS预处理器（如Sass、...
例如，考虑一个包含多个按钮的列表，每个按钮都有点击事件，我们可以这样实现事件委托： ```html <li><button>按钮1</button></li> <li><button>按钮2</button></li> <!-- 更多按钮 --> ``` ```javascript ...
可以使用DocumentFragment批量操作DOM，或者使用事件委托来减少事件监听器的数量。 3. **JavaScript性能提升**：避免阻塞渲染的JavaScript执行，将脚本放在`<body>`底部，或使用`async`或`defer`属性。优化循环，...
一、前端性能优化基础 1. 页面加载速度：网页加载时间直接影响用户体验，因此理解HTTP协议、DNS解析过程、TCP连接建立等基础知识至关重要。 2. 响应式设计：适应不同设备的屏幕尺寸，确保网站在手机、平板电脑和桌面...
在前端开发领域，JavaScript 和 CSS 优化是提升网站性能、用户体验和搜索引擎排名的关键技术。中级进阶阶段，开发者需要深入理解这些技术的优化策略，以实现更高效、更流畅的网页应用。 首先，我们来探讨JavaScript...
7. **前端框架选择**：根据项目需求选择合适的前端框架，比如React、Vue等，它们内置了许多性能优化机制。 8. **响应式设计**：确保页面在不同设备和屏幕尺寸下都能良好展示，提升用户体验。 总之，在进行页面性能...
总体而言，事件委托技术是每个前端开发者都应该掌握的性能优化技巧之一。 希望本文所述内容能为JavaScript程序设计人员在开发过程中遇到性能问题时提供帮助，使大家在事件处理方面能够更加得心应手。
- 事件处理：事件冒泡、事件捕获、事件委托。 - 动画效果：setTimeout和requestAnimationFrame的区别与应用。 4. 浏览器工作原理： - 渲染引擎：解析HTML、CSS，构建DOM树和CSSOM树，绘制页面。 - 同源策略与...
下面是一段简单的JavaScript代码示例，展示了如何实现选项卡事件委托： ```javascript document.getElementById('tabContainer').addEventListener('click', function(event) { if (event.target.classList....
- **性能优化**：使用事件委托，减少内存占用，避免阻塞DOM渲染。 5. **移动端优化**： - **300ms点击延迟**：针对移动设备，消除300ms的点击延迟，提高用户体验。 - **快速回弹滚动**：实现流畅的滚动效果，...
- 理解前端性能优化原理和实践，如首屏加载、异步加载等。 - 熟悉版本控制工具（如Git），前端构建工具（如Webpack），以及自动化测试。 以上内容是web前端面试中常见的知识点，理解并掌握这些内容将有助于在面试...
- CSS性能优化：减少重排和重绘，使用CSS3动画而非JavaScript。 2. JavaScript核心： - 数据类型：了解基本类型和引用类型，特别是`null`和`undefined`的区别。 - 函数：函数表达式、箭头函数、作用域和闭包。 ...
**性能优化** - **避免全局查找**：减少对`window`对象的引用，使用局部变量。 - **减少DOM操作**：批量操作DOM，避免频繁读写。 - **事件委托**：用事件代理减少事件监听器的数量。 - **防抖与节流**：利用...