JavaScript事件委托

 

 

添加到页面的事件处理函数的个数直接影响到页面整体运行性能。导致这问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中对象越多，越影响性能。其次，必须事先指定所有的事件处理程序而导致DOM操作次数增加，会影响整个页面的交互就绪时间。

 

对于"事件处理程序过多的情况"问题的解决方案是事件委托。

 

事件委托原理：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如：我们为整个一个页面制定一个onclick事件处理程序，此时我们就不必为每个页面中每个可点击的元素单独设置事件处理程序。

 

事件委托概念：给元素的父级或者祖级，甚至页面绑定事件，然后利用事件冒泡的基本原理，通过事件目标对象进行检测，然后执行相关操作。

 

具体事例代码如下：

 

 var inner = document.getElementById('inner'); 

 var inner_Li = inner.getElementsByTagName('li');
 var btn = document.getElementById('btn');
 // 事件绑定
 eventUtil.addHandler(inner,"click",function(event){
       var eve = eventUtil.getEvent(event);   // 获取事件对象
       var target = eventUtil.getTarget(eve);  // 获取事件目标对象
       alert(target.innerHTML);
 });

 eventUtil.addHandler(btn,"click",function(){
       for(var i = 5; i <= 100; i++) {
            var newLi = document.createElement("li");
            newLi.innerHTML = i;
            inner.appendChild(newLi);
      }
});

 

事件委托的优势：

 

1.大大的减少了事件处理程序的数量，在页面中设置事件处理程序的时间就更少（DOＭ引用减少，所需要的查找操作以及ＤＯＭ引用就更少）。

 

2.document对象可以很快的访问到，而且可以在页面声明周期的任何时间点为它添加事件处理程序，并不需要等待DOMContentLoaded或者load事件。换句话说，只要可单击的元素在页面中呈现出来了，那么它就立刻具备了相应的功能。

 

3.整个页面占用的内存空间会更少，从而提升了整体的性能。