浅谈javascript事件委托

讲解之前先来讲讲性能.

如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.

首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.

其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.

一、事件委托

对事件处理程序过多的问题解决的方案就是事件委托技术.

事件委托技术利用了事件冒泡.只需指定一个事件处理程序.

我们可以为某个需要触发事件的父元素来绑定事件处理程序.

HTML代码

<div id="aa">aa</div>
    <div id="bb">bb</div>
    <div id="cc">cc</div>
    <div id="dd">dd</div>

现在的情况下 我们用dom获取当前的元素 那么要写四次 这样就会影响性能

使用事件委托，数个事件处理函数可以使用一个函数来管理。所有的单击事件被委托给一个合适的函数来处理。

采用事件委托方法如下：

1. <script>  
2.         document.onclick = function(event){  
3.             event = event || window.event;  
4.             var target = event.target || event.srcElement;//srcElement 针对IE  
5.             switch(target.id){  
6.                 case "aa" :   
7.                 aa();  
8.                 break;  
9.                 case "bb" :   
10.                 bb();  
11.                 break;  
12.                 case "cc" :   
13.                 cc();  
14.                 break;  
15.                 case "dd" :   
16.                 dd();  
17.                 break;  
18.             }     
19.         }  
20.           
21.         function aa(){  
22.             alert("aa");      
23.         }  
24.         function bb(){  
25.             alert("bb");      
26.         }  
27.         function cc(){  
28.             alert("cc");      
29.         }  
30.         function dd(){  
31.             alert("dd");      
32.         }  
33.     </script>  
34.