前端之家收集整理的这篇文章主要介绍了
JavaScript 事件对内存和性能的影响，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_301_0@虽说事件处理程序可以为现代 Web 页面添加很强的交互能力，但是不分青红皂白就添加大量的事件处理程序绝对是一种愚蠢的行为。
@H_
301_0@我们来分析一下：事件处理程序本质上是一种
函数，是一种对象，存放在内存中，设置大量的事件处理程序会使内存中的对象变多，Web 程序的
性能会变得越来越差，
用户体验很不好。
@H_
301_0@为了更好地利用好事件处理程序，便出现了事件委托，用来提升
性能。
@H_
3010@事件委托
@H301_0@<span style="color: #800000">
事件委托（event delegation）：
把若干个子节点上的相同事件的处理
函数绑定到它的父节点上去，在父节点上统一处理从子节点冒泡上来的事件，这种技术就叫做事件委托。
@H_
301_0@<span style="color: #800000">
补充一下：
事件委托并不局限于父节点与子节点之间。也可以这样玩，比如
页面文档中有好多个处在不同位置地 button，都是绑定 click 事件，使用事件委托，我们可以把这些个事件统一绑定到 body 元素，然后再进行处理（虽然一般很少这么用）。
@H_
301_0@下面举例子逐步说明事件委托的优势：
<div class="jb51code">
<pre class="brush:xhtml;">
<ul id="parent-list">
<li id="list-1">List 1
<li id="list-2">List 2
<li id="list-3">List 3
<li id="list-4">List 4
<li id="list-5">List 5
放在你眼前：1. 为每个 li 子元素绑定 click 事件，然后设置处理
； 2. 利用事件委托，为 ul 父元素绑定 click 事件，然后设置处理
方法一
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click",function() {
alert(this.firstChild.nodeValue);
},false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click",false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click",false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click",false);
//
方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
var target = event.target;
if(target.nodeName.toLowerCase() === "li"){
alert(target.firstChild.nodeValue);
}
},false);
二的优点：1. 减少了访问 DOM 的
；2. 将子元素的事件处理程序统一绑定到其父元素，减少了对内存的占用；3. 可以更好地管理事件处理程序，比如移除对某个事件处理程序的引用
@H_
方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
var target = event.target;
if(target.nodeName.toLowerCase() === "li"){
switch(target.id){
case "list-1":
alert("学的越多，越觉得自己无知！");
break;
case "list-2":
alert("爱是一种艺术！");
break;
case "list-3":
target.innerHTML = "呵呵，我改了啊！";
break;
case "list-4":
target.style.background = "#aaa";
break;
case "list-5":
target.style.color = "red";
target.style.fontSize = "2em";
break;
default:
break;
}
}
},false);
