js性能优化_事件委托
什么是事件委托：
事件委托就是在一个页面上使用一个事件来管理多种类型的事件。通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
这样做有什么好处：
事件委托并不是一个新的想法，但对于把握性能来说却很重要。通常情况，你会在web应用程序中看到这样的代码：
document.getElementByIdx_x_x("help-btn").onclick = function(event){ openHelp(); };
document.getElementByIdx_x_x("save-btn").onclick = function(event){ saveDocument(); };
document.getElementByIdx_x_x("undo-btn").onclick = function(event){ undoChanges(); };
这种传统的编码方式给每个元素分配单独的事件处理方法。对于交互少的站点来说，这样做是可以的。然而，对于大型的web应用程序，当存在大量的事件处理 的时候，就会显得反应迟钝。这里要关注的不是速度问题，而是内存占用问题。如果有数百个交互，DOM元素和JavaScript代码就会有数百个关联。 web应用需要占用的内存越多，它的响应速度就越慢。事件委托能将这个问题减小。
好处呢：1，提高性能。
举个例子：需要触发每个li来改变他们的背景颜色。
- aaaaaaaa
- bbbbbbbb
- cccccccc
window.onload = function () {
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
for (var i = 0; i < aLi.length ; i++) {
aLi[i].onmouseover = function () {
this.style.background = "red";
}
aLi[i].onmouseout = function () {
this.style.background = "";
}
}
}
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}
好处2，新添加的元素还会有之前的事件。
我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li
如：
- aaaaaaaa
- bbbbbbbb
- cccccccc
不用事件委托我们会这样做：
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
for(var i=0; i这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
因为点击添加的时候for循环已经执行完毕。
那么我们用事件委托的方式来做。就是html不变
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
总结：
事件委托对于web应用程序的性能有如下几个优点：
1.需要管理的函数变少了
2.占用的内存少了
3.javascript代码和Dom结构之间的关联更少了
4.在改变DOM结构中的innerHTML时，不需要改动事件处理函数
从传统的事件处理方法转向事件委托提高了大型web应用的性能。正因为它如此的重要，一些类似于YUI、jQuey的javascript库也开始将事件委 托应用在它们的核心接口中。实现事件委托是很轻松的，却能带来性能上很大的提高。尤其表现在你将数十个事件处理函数整合到一个函数里。试一下事件委托，你 就不会再使用传统的事件处理方法了。