`
tjuking
  • 浏览: 195018 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript性能优化 - 事件委托

阅读更多

JavaScript网页开发中经常出现的就是事件处理程序,交互越多可能就需要注册更多的事件处理程序,这也导致了一定的性能问题:

 

  • 事件处理函数是对象,对象存储于内存空间,对象越多消耗的内存也就越大
  • 事件注册需要在页面交互就绪前访问DOM元素,注册的DOM越多,访问时间越长

解决这个问题的一种方法就是事件委托。事件委托是依赖于事件冒泡机制(IE事件流,从最具体的元素开始接收事件,逐级向上传递直至最顶层文档),我们先来看一个利用事件冒泡为element元素注册一个点击处理程序:

//DOM2 第三个参数为false表示冒泡机制
element.addEventListener("click", function(){
    /* ... */
}, false);

//IE
element.attachEvent("onclick", function(){
    /* ... */
});

  

事件委托是一个什么概念呢?

 

其实就是在父级元素上注册事件处理程序(依据事件的具体接收元素执行相应的代码片段),用来替代在多个子孙元素上的事件注册。

 

举一个偏极端的例子,比如原本页面中有许多DOM元素都绑定了点击事件,现在进行事件委托,只在最顶层的文档(document)注册一个点击处理程序,通过点击事件的target属性可以获得点击具体的接收元素,根据元素的tagName、ID等进行不同的处理就可以实现事件委托。

document.addEventListener("click", function(event){
    //IE的attachEvent函数中是event.srcElement
    var target = event.target;
    switch(target.id){
        /* ... */
    }
}, false);

 

当然我们应该去实现更加合理的事件委托。

 

比如一个UL-LI标签栏,点击不同的LI标签则展现对应的内容,如果给每个LI标签都注册一个点击事件会造成一定的性能浪费。我们就可以只在该UL元素上注册一个点击事件通过LI的属性值来区分具体的接收元素,然后就可以进行该LI标签处理程序片段。

<ul class="nav">
    <li id="bbcode">BBCode编辑器</li>
    <li id="visual">可视化编辑器</li>
    <li id="preview">预览</li>
</ul>

 

PS:动态生成的元素也适用于事件委托。

 

3
0
分享到:
评论
2 楼 tjuking 2013-02-28  
tang_kun_cool 写道
不干苟同啊。整个dom的监听?

document监听是偏极端,只是为了举例说明事件委托。第二个例子我觉得使用事件委托就很合理。
1 楼 tang_kun_cool 2013-02-28  
不干苟同啊。整个dom的监听?

相关推荐

    Javascript 性能优化的一点技巧

    通过上述介绍,我们可以看到,JavaScript性能优化涉及到多个方面,包括变量管理、DOM操作、事件处理、异步编程以及资源加载等。开发者应该根据实际需求选择合适的优化策略,并不断学习新的技术以适应快速发展的前端...

    JavaScript性能优化的小知识总结共23页.pdf

    以下是一些关于JavaScript性能优化的关键知识点: 1. **延迟加载(Lazy Loading)**:为了提高页面加载速度,可以使用延迟加载策略,如图片懒加载,只在用户滚动到可视区域时才加载资源。 2. **代码分割(Code ...

    javascript性能优化之事件委托实例详解

    本文实例分析了javascript性能优化之事件委托。分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 &lt;li id=goSomewhere&gt;Go somewhere &lt;li id=doSomething&gt;Do something &lt;li id=sayHi&gt;Say hi 一...

    JavaScript之事件委托.pdf

    1. **性能优化**:事件委托减少了DOM操作,特别是当子元素数量多时,可以显著减少内存和CPU资源的消耗。 2. **动态元素处理**:对于动态添加或删除的子元素,无需重新绑定事件监听器,因为父元素的监听器始终有效。 ...

    JavaScript性能优化技巧分享共8页.pdf.zip

    本文将深入探讨JavaScript性能优化的若干关键技巧,帮助你提升应用的运行效率和用户体验。 1. **代码结构优化** - **减少DOM操作**:DOM(Document Object Model)操作是JavaScript性能的主要瓶颈之一。尽量通过...

    js-高性能JavaScript-JavaScript语言精粹修订版

    - 掌握事件处理机制,包括事件委托等高级技术。 - 学习如何创建平滑的动画效果。 4. **AJAX与异步编程:** - 了解XMLHttpRequest对象的使用方法。 - 掌握fetch API和async/await语法。 5. **模块化开发与前端...

    javascript经典特效---万年历.rar

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,...5. 可能的模块化编程和性能优化技巧。 通过学习和分析这个实例,开发者不仅可以提升JavaScript编程能力,还能深入了解Web前端开发中的实际问题解决策略。

    javascript实例应用---在线测试类.rar

    9. **性能优化**:避免不必要的DOM操作,使用事件委托提高性能,确保在大量数据或复杂交互时依然流畅。 10. **兼容性**:由于JavaScript的跨平台特性,需要考虑不同浏览器的兼容性问题,确保代码能在主流浏览器上...

    javascript-in-one-pic

    最后,可能会提及JavaScript的错误处理、调试技巧以及性能优化策略,如try/catch结构、使用console工具、避免全局变量和减少DOM操作等。 "js in one pic.pdf"可能是这个知识点图的PDF版,方便打印和离线阅读;"js ...

    javascript经典特效---带彩色边框的图片.rar

    9. **性能优化**:大量图片操作可能会影响页面性能,特别是在移动设备上。使用事件委托、批量修改样式以及避免不必要的计算,可以提高代码效率。 10. **代码组织**:良好的代码结构和模块化设计有助于代码的维护和...

    javascript经典特效---固定的图片广告.rar

    总的来说,这个“javascript经典特效---固定的图片广告.rar”实例是一个关于JavaScript在网页交互和视觉效果中应用的案例,涵盖了固定定位、事件处理、动画效果、响应式设计以及性能优化等多个方面。通过学习和分析...

    artech-javascript-jquery-11

    7. **性能优化**:如何有效使用jQuery以提高页面性能,如避免DOM遍历、减少内存泄漏、使用事件代理等。 8. **与其他库的集成**:如何在jQuery项目中使用其他JavaScript库,如Bootstrap的JS组件、AngularJS等。 ...

    javascript经典特效---多层超酷导航条.rar

    总的来说,“javascript经典特效---多层超酷导航条.rar”这个资源提供了一个学习JavaScript动态效果和交互设计的实例,涵盖了从基础的DOM操作到高级的性能优化等多个方面。通过研究和实践这个案例,开发者不仅可以...

    javascript网页开发-张孝祥.pdf

    ### 性能优化 - **减少DOM操作**:频繁的DOM操作会降低页面性能,应尽量减少对DOM的操作次数。 - **使用事件委托**:利用事件冒泡原理,将事件监听器绑定到父元素上,而不是每个子元素。 - **缓存计算结果**:对于...

    javascript源码大全------

    13. **性能优化**:包括事件委托、避免内存泄漏、减少DOM操作、代码压缩和合并等策略。 这个"javascript源码大全 .chm"文件很可能包含了上述知识点的实例代码,通过阅读和分析这些代码,开发者可以加深对JavaScript...

    JavaScript性能优化的小知识总结共23页.pdf.zip

    JavaScript性能优化是提升Web应用响应速度和用户体验的关键领域。这份名为"JavaScript性能优化的小知识总结共23页.pdf"的文档很可能包含了多个方面的重要信息,旨在帮助开发者掌握提高JavaScript代码效率的方法。...

Global site tag (gtag.js) - Google Analytics