JavaScript事件委托的详细介绍（附代码）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于JavaScript事件委托的详细介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

事件委托(又名事件代理)，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

网上有关于事件委托的一个“取快递”例子，十分生动，这里我对它作一些修改和拓展，然后通过程序来说明事件委托的机制。

某公司有三位员工，他们的快递收件地址为公司，每当有快递送达时，快递员拨打其电话进行通知，他们接到电话后去取件。

员工ID	员工名称	联系方式
A	甲	111111
B	乙	222222
C	丙	333333

对应到页面，就是每个员工是一个标记：

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

每位员工接电话取快递的行为就是一个个事件，这里我们假设收取快递行为对应着onclick事件：

A.onclik = function() {
    收取快递；
};
B.onclick = function() {
    收取快递；
};
C.onclick = function() {
    收取快递；
};

以上的实现，通常为通过循环遍历每一个员工，为其增加事件：

/*程序1*/
var aUl = document.getElemengtByID("前台工作人员");
var aLi = aUl.getElemengtsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        收取快递;
    }
}

可以看到，为每个员工都设置一个事件，会产生冗余代码，占用内存，同时会进行多次DOM操作(与DOM节点进行交互)，影响页面运行性能。

“减少DOM操作是性能优化的主要思想之一”

于是，我们理所当然地想到：为什么不能让前台工作人员帮我们签收快递呢？

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>
 
/*程序2*/
var tel = document.getElementById("前台工作人员");
tel.onclick = function() {
    收取快递;
}