事件处理程序的性能与优化

事件处理程序太多了，会带来一些问题的，首先，事件处理函数写多了，会占据内存，其次，这些处理函数导致DOM的访问次数增加，这样子会延迟整个页面的就绪时间 
所以，我们可以用事件委托的办法，来解决这些问题 
前面已经讲过事件冒泡了，事件委托就是利用了这一点 
举个例子

<div id="div1">
　　<p id="p1">激活</p>
　　<p id="p2">取消</p>
　　<p id="p3">取消</p>
　　<p id="p4">取消</p>
</div>
<div id="div2">
　　<p id="p5">取消</p>
　　<p id="p6">取消</p>
</div>

现在我们要实现的功能是，当我点击”激活“的时候，弹出”激活“，点击”取消“的时候，弹出”取消“。 
当然，我们不能在每一个p标签上面添加事件，所以我们就要用到事件委托

var p1=document.getElementById('p1')
p1.addEventListener('click',function(event){
　　event.stopPropagation()
　　alert("激活")
})
document.body.addEventListener('click',function(){
　　alert("取消")
})

我们在p1上面添加了一个事件，在body上面添加了一个事件。 
当我们点击其中的某一个”取消“的时候，由于冒泡的原因，会出发body上面的事件，因此，弹出了”取消“ 
由于事件冒泡的存在，p1不需要触发body上面注册的事件，因此我们取消了事件冒泡

再看一个例子

<div id="div">
　　<p id="p1">p1</p>
　　<p id="p2">p2</p>
　　<p id="p3">p3</p>
　　<p id="p4">p4</p>
</div>
<script type="text/javascript">
　　var div = document.getElementById('div')
　　div.addEventListener('click', function(event) {
　　　　var target=event.target
　　alert(target.innerHTML)
})

这样子，点击每一个p的时候，就会弹出他的内容