【javascript学习笔记】利用事件委托机制提高页面运行性能

由于事件处理程序可以为现代web应用程序提供交互能力，因此许多开发人员会不分青红皂白向页面中添加大量的处理程序，在JavaScript中，事件处理程序的数量将直接影响到页面的运行性能，导致过多占用内存，且增加Dom访问次数，从而延迟整个页面的就绪事件。对于此问题的解决方案就是“事件委托”。那么事件到底是如何实现的呢，本人的简单理解如下：

事件委托就是利用事件冒泡机制，只需要指定一个事件处理程序，就可以管理某一类型的所有事件。简而言之就是：对于某一类具有相似性的事件，不需要单独给每一个都加上事件，只需要给它们的父类加上一个事件就可以完成所有的事情，委托父类完成事件，即事件委托。下列代码中要想给每一个li加上点击事件，就需要获取所有的li接着为每一个li设置点击事件：

       

• 111



       

• 222



       

• 333



       

• 444

//html

window.οnlοad=function(){

    var aLi=doucment.getElementsByTagName("li");

    for(var i=0;i

        aLi[i].οnclick=function(){

            alert(aaa);

        }

    }

}//javascript

但是这样一来，这样一来页面进行了多次dom操作，首次找到所有的li，接着遍历li，然后每点击一次li都要找一次目标li，最后才执行相应的操作。在小型项目中这样的设计不会有太大影响，但是项目经过不断扩展之后，页面中存在过多的DOM操作代码会使页面的运行效率变低。

那么事件冒泡是什么呢。事件冒泡就是假如页面上有这么一个节点树，div>ul>li>a，给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，这就是事件冒泡机制。

因此用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发。

使用事件委托完成上面的例子javascript代码如下：

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(aaa);
    }

}

关于事件委托这里只是做简单的演示和讲解，具体在实际开发过程中还需要有更深的理解，可参考的文章：https://blog.csdn.net/u013035060/article/details/60770477