文档章节

js性能优化-事件委托

墨飞2015
 墨飞2015
发布于 2015/04/01 11:50
字数 458
阅读 211
收藏 10

考虑一个列表,在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,希望对大家开发有帮助!


本文转载自:

共有 人打赏支持
墨飞2015
粉丝 2
博文 22
码字总数 5150
作品 0
昌平
腾讯web前端开发工程师笔试题及答案

腾讯web前端开发工程师笔试题及答案 1、 如何实现事件委托? 首先要知道什么是事件委托。 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但...

至简6
2014/07/29
0
0
《高性能javascript》 领悟随笔之-------DOM编程篇(二)

《高性能javascript》 领悟随笔之-------DOM编程篇二   序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档。DOM编程性能一直以来都...

grootzhang
2016/05/10
0
0
js中的事件委托或是事件代理详解

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

菜鸟的进阶
2017/10/22
0
0
Javascript的事件模型和Promise实现

1. Javascript的运行时模型——事件循环 JS的运行时是个单线程的运行时,它不像其他编程语言,比如C++,Java,C#这些可以进行多线程操作的语言。当它执行一个函数时,它只会一条路走到黑,不...

远方无风
07/12
0
0
jQuery 1.7增加了对html5的支持

切图网(www.qietu.com)讯:jQuery最新版本添加了对html5的支持,发布的版 本号为jQuery1.7。 jQuery对我们来说一点也不陌生,作为一个第三发的js插件,影响程度居然影响了整个javascript书...

tyshymy
2012/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用Newtonsoft将DataTable转Json

使用Newtonsoft将DataTable转Json Newtonsoft提供的将DataTable转成Json: /// <summary> /// DataTable转Json /// </summary> /// <param name="dt"></param> /// <ret......

DemonsI
9分钟前
0
0
centos7安装zookeeper3.4.6

注:zookeeper充当注册中心 下载地址 http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.4.6/ 单机 下载完成后,将安装包上传值服务器,解压 tar xvzf zookeeper-3.4.6.tar.gz 进入解...

码代码的小司机
10分钟前
0
0
136. Single Number

136. Single Number 题意:一个数组中所有数字都是两两相同,只有一个数字是单独的,求出这个数字的值。 很简单的题,使用异或就能处理。 异或介绍:bit位上的值不同,异或后,值为1.否则为0...

117
12分钟前
0
0
Hash和HashCode深入理解

目录介绍 1.Hash的作用介绍 1.1 Hash的定义 1.2 Hash函数特性 1.3 Hash的使用场景 2.如何判断两个对象相等 2.1 判断两个字符串 2.2 判断两个int数值 2.3 其他基本类型 3.HashCode深入分析 3....

潇湘剑雨
18分钟前
0
0
ecshop 漏洞如何修复 补丁升级与安全修复详情

目前ecshop漏洞大面积爆发,包括最新版的ecshop 3.0,ecshop 4.0,ecshop2.7.3全系列版本都存在着高危网站漏洞,导致网站被黑,被篡改,被挂马,许多商城系统深受其漏洞的攻击,给商城的运营者...

网站安全
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部