事件处理程序为Web程序提供了系统交互,但是如果页面中的事件处理程序太多,则会影响页面的性能。每个函数都是对象,都会占用内存,内存中对象越多,性能越差。需要事先为DOM对象指定事件处理程序,导致访问DOM的次数增多,会延迟整个页面的交互就绪时间。

  • 事件委托

  对事件处理程序过多的解决方案是使用事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。比如click事件会一直冒泡到document,也就是说我们只需为整个页面指定一个onclick事件处理程序,而不必为每个需要点击事件的元素单独添加。

 <ul id="ul1">
<li id="li1">111</li>
<li id="li2">222</li>
</ul>

  例如上面的代码,如果我们采用常规手段来添加事件处理程序,我们需要为每个li都添加事件。但是如果采用冒泡,我们只需要指定一个事件处理程序,并且能够实现同样的功能。

 var oUl = document.getElementById("ul1"); 
EventUtil.addEvent(oUl, "click", function(ev) {    
var ev = EventUtil.getEvent(ev);    
var target = EventUtil.getTarget(ev);    
if(target.id == 'li1') {       
console.log("1");   
}
else if(target.id=="li2"){
console.log("2");
}  
});

  上面的代码中,通过事件冒泡为ul1指定了事件处理程序,在我们单击li的时候通过事件冒泡也会触发该事件,并且能够通过target来获取当前单击的元素对象。通过元素id,为每个元素执行不同的if语句。

并不是所有的事件都适合使用事件委托,比较适用的事件是:mouseup、mousedown、click、keyup、keydown和keypress。虽然mouseover和mouseout也支持事件冒泡,但是如果使用事件委托则处理就比较麻烦,而且需要计算鼠标的位置以及元素的位置(当鼠标从一个元素移到其子节点,或者移出元素都会触发mouseout事件)。

 var oUl = document.getElementById("ul1"); 
EventUtil.addEvent(oUl, "mouseout", function(ev) {    
var ev = EventUtil.getEvent(ev);    
var target = EventUtil.getTarget(ev);    
if(target.id == 'li1') {       
console.log("1");   
}
else if(target.id=="li2"){
console.log("2");
}  
});

  比如上面的代码,当鼠标移到li元素的时候会触发mouseout,鼠标移出ul元素的时候也会触发mouseout事件。

  • 移除事件处理程序

  前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多,会影响页面的性能,除了使用事件委托之外,还可以将一些事件移除。内存中留有的一些过时的用不到的事件处理程序也是造成Web页面和内存性能的主要问题。

  我们移除页面中的元素时候,可以通过removeChild和replaceChild方法,但有时候也会使用innerHTML来替换元素。如果某个元素有事件处理程序,通过innerHTML来替换,则事件处理程序依然存在,那么该事件处理程序已经使用不到,但是它也无法被回收,会一直占用内存空间。

  

 <div id="firstdiv">
<input type="button" id="btnadd" value="添加" />
</div>
 EventUtil.addEvent(document.getElementById("btnadd"),"click",function(event){
document.getElementById("firstdiv").innerHTML="processing";
});

  上面的代码中为btnadd元素绑定了单击事件,单击的时候通过innerHTML移除了该元素,但是元素的事件处理程序并没有移除,依然留在内存中。

  

 var callback =function(event){
EventUtil.removeEvent(document.getElementById("btnadd"),"click",callback);
document.getElementById("firstdiv").innerHTML="processing";
}
EventUtil.addEvent(document.getElementById("btnadd"),"click",callback);

  上面的代码,我们在元素移除之前,手动移除了元素的事件处理程序。这样确保内存中也移除了该事件处理程序,而从DOM中移除按钮也非常彻底。

浅谈JavaScript的事件(事件委托)的更多相关文章

  1. 浅谈JavaScript中的事件

    引言 Html页面与JavaScript之间的交互是通过事件来完成的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应的代码.这在传 ...

  2. 浅谈Javascript单线程和事件循环

    单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...

  3. 浅谈javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...

  4. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  5. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  6. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  7. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  8. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  9. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  10. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

随机推荐

  1. C. RMQ with Shifts

    C. RMQ with Shifts Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 131072KB   64-bit intege ...

  2. ubuntu 终端查看图片(eog)

    远程登陆服务器的话,是没有办法直接查看图片的,这时我们需要进入图片所在目录,然后通过终端命令查看图片. 想要查看图片,需要通过ssh -X登陆,然后在终端输入命令: eog 图片名

  3. 【bzoj1444】[Jsoi2009]有趣的游戏 AC自动机+矩阵乘法

    题目描述 输入 注意 是0<=P 输出 样例输入 样例输出 题解 AC自动机+矩阵乘法 先将所有字符串放到AC自动机中,求出Trie图. 然后构建邻接矩阵:如果x不是某个字符串的末位置,则x连向 ...

  4. BZOJ 3270 博物馆 ——概率DP 高斯消元

    用$F(i,j)$表示A在i,B在j的概率. 然后很容易列出转移方程. 然后可以高斯消元了! 被一个问题困扰了很久,为什么起始点的概率要加上1. (因为其他博客上都是直接写成-1,雾) 考虑初始状态是 ...

  5. [POJ1741]Tree(点分治模板)

    传送门 良心解析 其实以前在求某段序列上的区间统计问题时就碰到过类似于这样的思想. 当时的区间统计问题思路大致是这样: 选取一个点作为中间点,从这个点的左边和右边统计出满足条件的点对.然后当前的中间点 ...

  6. CentOS7关于网络的设置

    装好CentOS7后,我们一开始是上不了网的 这时候,可以输入命令dhclient,可以自动获取一个IP地址,再用命令ip addr查看IP 不过这时候获取的IP是动态的,下次重启系统后,IP地址也会 ...

  7. 洛谷 [P1939] 矩阵加速数列

    矩阵快速幂模版 #include <iostream> #include <cstring> #include <cstdlib> #include <alg ...

  8. 【Codeforces Round #506 (Div. 3) 】

    A:https://www.cnblogs.com/myx12345/p/9844334.html B:https://www.cnblogs.com/myx12345/p/9844368.html ...

  9. poj 3461 hash解法

    字符串hash https://blog.csdn.net/pengwill97/article/details/80879387 https://blog.csdn.net/chaiwenjun00 ...

  10. Codeforces 848B Rooter's Song(分类+模拟)

    题目链接 Rooter's Song 题意  有n个舞者站在x轴上或y轴上,每个人有不同的出发时间.x轴上的舞者垂直x轴正方向移动,y轴上的舞者垂直y轴正方向移动. 当x轴的舞者和y轴的舞者相遇时,他 ...