JavaScript的事件委托技术

标签：style   color   io   ar   java   sp   on   问题   cti   

如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了。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;

　　}

}

JavaScript的事件委托技术

标签：style   color   io   ar   java   sp   on   问题   cti   

原文地址：http://www.cnblogs.com/yixiaoWang/p/4042205.html