浅谈javascript事件委托

讲解之前先来讲讲性能.

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

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

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

一、事件委托

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

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

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

HTML代码

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

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

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

采用事件委托方法如下：

 

<script>  
        document.onclick = function(event){  
            event = event || window.event;  
            var target = event.target || event.srcElement;//srcElement 针对IE  
            switch(target.id){  
                case "aa" :   
                aa();  
                break;  
                case "bb" :   
                bb();  
                break;  
                case "cc" :   
                cc();  
                break;  
                case "dd" :   
                dd();  
                break;  
            }     
        }  
          
        function aa(){  
            alert("aa");      
        }  
        function bb(){  
            alert("bb");      
        }  
        function cc(){  
            alert("cc");      
        }  
        function dd(){  
            alert("dd");      
        }  
    </script>