JavaScript学习之事件委托

1 内存和性能

  在JavaScript中,添加到页面上的事件处理程序的数量直接关系到页面的整体运行性能

  首先,每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。

  其次,必须事先指定所有事件处理程序,会导致DOM访问次数增加,会延迟整个页面的交互就绪时间。

2 事件委托

  事件委托就是事件目标本身不处理事件,而是把处理任务委托给其父元素或祖先元素。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

  事件委托解决了"事件处理程序过多"的问题。

  假定现在有个ul无序列表(id为items),其中li(id为item+序号)代表每个项,当点击项时需弹窗显示项的基本信息。

  采用事件绑定li的方法(addHandler是跨浏览器的添加事件处理程序函数,具体实现见JavaScript事件章节):  

var item1 = document.getElementById(‘item1‘);
var item2 = document.getElementById(‘item2‘);
var item3 = document.getElementById(‘item3‘);

EventUtil.addHandler(item1, "click", function(){
	alert("I am item1!");
});

EventUtil.addHandler(item2, "click", function(){
	alert("I am item2!");
});

EventUtil.addHandler(item3, "click", function(){
	alert("I am item3!");
});

  使用事件委托,只需在DOM树种尽量最高的层次添加一个事件处理程序。

var items = document.getElementById(‘items‘);
EventUtil.addHandler(items, "click", function(event){
	var event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);

	alert("I am " + target.id);
});

  这里,通过事件委托只为ul元素添加了一个onclick的事件处理程序。由于所有li都是这个ul的子节点,而且它们的事件会冒泡,所以单击事件最终会被这个函数处理。

  对比普通的事件绑定代码和使用事件委托后的代码,会发现使用事件委托后消耗更小:只获取了一个DOM节点,只添加了一个事件处理程序,占用的内存更小。

  所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用委托的技术。

3 移除事件处理程序

  减少浏览器代码和支持页面交互的JavaScript代码之间的连接,通常有两种方法:

  1.使用事件委托技术,限制建立的连接数量;

  2.在不需要的时候,移除事件处理程序

  如果没有很好地移除事件处理程序,会导致"空事件处理程序",进而也会影响程序内存和性能,造成空事件处理程序的原因:

  1.从文档中移除了带有事件处理程序的元素(removeChild(),replaceChild());

  2.带有事件处理程序的元素被innerHTML删除了。解决办法在innerHTML操作前通过给事件赋值null移除事件处理程序

  3.页面卸载的时候(IE8-),如果在页面被卸载前没有清理干净事件处理程序,那么它们就会滞留在内存。解决办法通过onunload事件处理程序移除所有事件处理程序。

时间: 2024-12-21 18:26:40

JavaScript学习之事件委托的相关文章

JavaScript 学习笔记— —事件委托

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果 //好处 //1.提高性能 //2.新添加的元素,还会有之前的事件 //event

JavaScript学习总结--事件委托

一般情况下我们对一个DOM元素绑定事件时有三种方式 //省略之前代码 <div onclick="eventFn()"></div> aDiv=onclick=function(){ //... } aDiv.addEventListener('click',function(){ //... },false) 这样写是没有任何问题的(当然方法1并不可取) 但是在实际开发中我们会碰到诸如十几二十个li元素绑定事件的情况,甚至更多的元素,那么事件绑定这种给每一个元

Javascript中的事件委托机制

事件委托 事件委托,顾名思义,就是将本来要触发在A元素身上的事件,委托给B元素来触发,例如像onclick,onmouseover等事件都可以通过事件委托去触发. 事件委托实际上是通过事件冒泡的原理,将事件绑定在父元素或者祖先元素上,通过父元素或祖先元素触发相应的事件. 通过单纯的文字描述可能不太好理解,我们来通过代码去看看事件委托机制有哪些优点? 优点1-提高Javascript性能 使用事件委托机制绑定事件,可以减少内存的占用,从而提高事件处理速度.我们通过具体的实例来进行讲解. 我们要完成

javascript中的事件委托

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡, 通常,在js中监听事件的方法共有三

Javascript中的事件委托(事件代理)

之前我们说过用 for 循环绑定事件 没看过的点这里   今天我们介绍一种更加方便的方法,就是事件委托,也叫事件代理: 件事委托是什么 事件委托:简单说就是把一个事件交给别人来完成,就是利用冒泡原理,将事件绑定到节点的父级节点上,触发执行效果. 件事委托的好处 提高Javascript性能.假如现在有个 ul,里面有10个 li,每个 li 都需要触发事件,之前我们说过可以用 for 循环,遍历所有的 li,然后添加事件,这样会影响Javascript性能. 动态绑定事件,可以给暂未存在的元素绑

JavaScript学习--Item35 事件流与事件处理

1. 事件处理 1.1. 绑定事件方式 (1)行内绑定 语法: //最常用的使用方式 <元素 事件="事件处理程序"> (2)动态绑定 //结构+样式+行为分离的页面(html+css+js事件) 语法: 对象.事件=事件处理程序 行内绑定和动态绑定的重要区别: 以上程序是不可用的,点击div时,执行test函数,这时,test中的this表示window对象 因为: 我们定义test函数,实际上相应于在window对象下定义了test属性 test(); -> 相当

js学习总结----事件委托和事件代理

1.什么是事件委托/事件代理 利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,我们没有必要一个个的绑定了,只需要给最外层容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作. 具体小案例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

javascript举例介绍事件委托的典型使用场景

在了解什么是DOM事件以及给DOM事件绑定监听器的几种方法后,我们来谈谈事件委托. 1. e.target 和 e.currentTarget 当我们给目标元素target 绑定一个事件监听器target.addEventListener(event,function(){}), 并指定回调函数function(e), 函数的参数e表示事件.此时e.target 与 e.currentTarget分别表示自己触发事件的元素与被监听的元素 <html> <body> <ul s

【JavaScript学习】-事件响应,让网页交互

什么是事件: JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果. 主要事件表: 事件1:onclick 说明:onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 实例代码: