js性能优化-事件委托

考虑一个列表，在li的数量非常少的时候，为每一个li添加事件侦听当然不会存在太多性能方面的问题，但是当列表非常的长，长到上百上千甚至上万的时候（当然只是一个解释，实际工作中很少遇到这么多li的情况），为每个li添加事件侦听就会对页面性能产生很大的影响。

就像下面这段代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body> 
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html> 
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
var b=a.getElementsByTagName('li');
for(var i=0;i<b.length;i++){
b[i].addEventListener('click',function(e){
var c = e.target; 
alert(c.innerHTML);
},false);
}

})();
</script>

首先，我们来想下，产生性能问题的根本原因是什么呢？li元素（目标对象）所要进行的事件处理了。怎么可以解决这种囧况呢？

答案就是采用事件委托，将在li对象上面要处理的事件委托给父元素或者祖先元素，即为父元素绑定事件侦听，

看看下面的改进代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body> 
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html> 
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
a.addEventListener('click',function(e){
var b = e.target; 
alert(b.innerHTML);
},false);
})();
</script>

虽然现在很多框架都已经实现了事件委托，但是作为一个开发人员，用框架的同时我们也应该知道他实现的原理是如何的，知其然，更要知其所以然，下面是我最近在图灵社区看到的（jquery解决方案）：http://www.ituring.com.cn/article/467，希望对大家开发有帮助！

js性能优化-事件委托的更多相关文章

  1. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  2. js 性能优化利器：prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  3. js中的事件委托或是事件代理

    JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...

  4. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  5. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  6. JS性能优化 之 事件委托

    面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见.JS中事件委托的实现主要依赖于 事件冒泡 .那什么是事件冒泡?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一 ...

  7. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  8. 我所经历的JS性能优化

    转自http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html 折腾了好几天,纠结了好几天,郁闷了好几天,终于在今天可以释怀了,留下其中 ...

  9. js性能优化--学习笔记

    <高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...

随机推荐

  1. 深入理解javascript原型和闭包（2）——函数和对象的关系

    上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...

  2. js中join和split的用法

  3. Python 爬虫2

    import urllib.request import os import re import time 设置头文件 head={} head['User-Agent'] ='Mozilla/5.0 ...

  4. idea key

    sublime 3 —– BEGIN LICENSE —– Fred Zirdung Single User License EA7E-844672 6089C0EC 22936E1A 1EADEBE ...

  5. Linux下对比两个文件夹的方法

    最近拿到一份源代码,要命的是这份源代码是浅克隆模式的git包,所以无法完整显示里面的修改的内容. 今天花了一点点时间,找了一个在Linux对比两个文件夹的方法. 其实方法很简单,用meld 去对比两个 ...

  6. 2.MongoDB 基于node.js访问和操作集合

    对于频繁使用的Node.js来说,常见的任务是集合的动态操控. 较大的安装给每个大客户一个单独的集合,以便客户登入或离开时.根据需要添加或删除集合. MongoDB Node.js 驱动程序 Db和C ...

  7. Hbuilder MUI 选择器（Picker）设置默认选项

    mui 联动选择初始化很多人都遇到问题,就是setselectedvalue 不好用,实际上这个地方应该是有bug的 所以只能用setselectedindex 来实现 下面我是我的实现方式供大家参考 ...

  8. 关于git的简单实用命令

    时代在进步啊,现在已经不是svn的时代了,好多人都在使用git.所以自己也稍微学习了下git的使用. 常见的通过git提交代码步骤: git status :查看文件状态 :该命令显示你工程内修改的所 ...

  9. ACM-ICPC如何起步

    刚刚绝定投身ACM-ICPC的同学先要过两关. 第一关:程序设计语言 如果学校有开设相关课程,则省去了很多麻烦.如果没有则可以选择<程序设计导引及在线实践>作为教材.现在的比赛中允许使用的 ...

  10. Bravebeart

    E - Bravebeart Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Sub ...