如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了。DOM访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.
一、事件委托
对事件处理程序过多的问题解决的方案就是事件委托技术.
事件委托技术利用了事件冒泡.只需指定一个事件处理程序.
我们可以为某个需要触发事件的父元素来绑定事件处理程序.
HTML代码:
<ul id = "ul1">
<li id = "li1"></li>
<li id = "li2"></li>
<li id = "li3"></li>
</ul>
现在我们要为这3个li绑定事件处理程序..
只需要在ul绑定事件处理程序即可，在js中每一个函数都是一个对象，如果有n个处理函数的话就会创建n个对象，对象就会占用很多内存，内存中的对象越多性能就越差。我们可以采用事件委托技术只给其父元素加一个处理函数，然后利用事件委托给其子元素，相当于只创建了一个对象，如果在一个复杂的web应用程序中,这种事件委托是非常实用的,对提高性能有很大的帮助。
js代码:
var oUl = document.getElementById("ul1");
aLi = [].slice.call(oUl.getElementsByTagName("li"));
oUl.onclick = function(e)
{
e = e || event;
var target = e.target || e.srcElement;
var index = aLi.indexOf(target);
switch (index)
{
case 0:
alert("li1");
break;
case 1:
alert("li2");
break;
case 2:
alert("li3");
break;
}
}