本篇文章给大家带来的内容是关于javascript事件委托的详细介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
事件委托(又名事件代理)，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
网上有关于事件委托的一个“取快递”例子，十分生动，这里我对它作一些修改和拓展，然后通过程序来说明事件委托的机制。
某公司有三位员工，他们的快递收件地址为公司，每当有快递送达时，快递员拨打其电话进行通知，他们接到电话后去取件。
员工ID 员工名称 联系方式A甲111111B乙222222C丙333333对应到页面，就是每个员工是一个标记：
- 员工甲
- 员工乙
- 员工丙
登录后复制
每位员工接电话取快递的行为就是一个个事件，这里我们假设收取快递行为对应着onclick事件：
立即学习“Java免费学习笔记（深入）”；
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操作是性能优化的主要思想之一”
于是，我们理所当然地想到：为什么不能让前台工作人员帮我们签收快递呢？
- 员工甲
- 员工乙
- 员工丙
登录后复制
假设此时快递员打电话通知员工甲取件(onclick)，但员工甲的DOM节点
并无对应事件(onclick)，所以这个事件会“冒泡”到的父元素，发现上有onclick处理事件，于是触发该事件，由前台工作人员收取快递。
可以看到，这样一来，不仅缩减代码量，同时与DOM节点的交互次数也得到了缩减。
还有一个优点：当增加新的DOM节点时，自动携带父元素的事件效果。也就是说，当有一个新员工丁来公司后，前台工作人员会直接帮他收取快递，而无需专门为他设置事件。
例如，当新员工丁来到公司后：
........./*程序3*/var aBtn = document.getElementById("btn");aBtn.onclick = function() { var aLi = document.createElement("li"); oLi.innerHTML = "员工丁"; aUl.appendChild(aLi);}...
登录后复制
在不使用事件委托的程序中，新增的员工丁是没有事件的，我们需要用一个函数包含住程序1：
/*程序4*/function pro1() { var aUl = document.getElemengtByID("前台工作人员"); var aLi = aUl.getElemengtsByTagName("li"); for (var i = 0; i < aLi.length; i++) { aLi[i].onclick = function() { 收取快递; } }}
登录后复制
然后在新增新员工丁的程序的末尾执行这个函数：
/*程序5*/var aBtn = document.getElementById("btn");aBtn.onclick = function() { ... pro1();}
登录后复制
这样做的缺点是显而易见的：DOM节点交互次数成倍增加。
若我们采用事件委托机制来实现，就不会存在这个问题，子元素节点的onclick事件会直接在父元素节点得到执行。
到这里，我们会想到：对于同一种事件来说，使用事件委托将其放置在父元素节点上固然很方便。但如果对于不同的子元素节点要执行不同的事件呢，还能使用事件委托吗？
答案是肯定的。
例如上述三位公司员工，总是使用固定品牌的快递：
员工甲因为便宜，喜欢使用申通快递，申通只送到园区大门;员工乙是京东会员，总是购买京东自营商品，京东快递送到楼下;员工丙是顺丰VIP，顺丰快递会送到送到所在楼层大厅。
他们三位在接到电话后，前台工作人员需要去不同的地方取件，对于不使用事件委托的程序，需要对每个人设置独特的处理事件：
var A = document.getElementById("A");var B = document.getElementById("B");var C = document.getElementById("C");A.onclick = function() { 去园区大门取快递；}B.onclick = function() { 去楼下取快递；}C.onclick = function() { 去本层大厅取快递；}
登录后复制
至少需要三次DOM操作，而且为每一个对应节点都设置了事件函数。
而若采用事件委托：
var aUl = document.getElemengtByID("前台工作人员");aUl.onclick = function (ev) { var target = ev || window.event; /*兼容浏览器*/ var target = ev.target || ev.srcElement; /*兼容浏览器*/ if (target.nodeName.toLocaleLowerCase() == "li") { switch(target.id) { case "A" : 去园区大门取快递; break; case "B" : 去楼下取快递; break; case "C" : 去本层大厅取快递; break; } }}
登录后复制
这样一来，DOM操作就只有一次，其他的操作都在JS内进行，可以有效提升网页性能。
以上便是JS事件委托的基本思想。简而言之，就是利用事件冒泡这一特点，来对事件进行管理，减少冗余代码，减少不必要的创建，减少交互操作以节约内存和提高性能。
事件冒泡
事件冒泡是当触发某个DOM元素节点时，若该节点没有对应事件，则检查其父元素是否有对应事件，若有，则执行，若没有，继续向上检查。与其对应的还有事件捕获
以上就是JavaScript事件委托的详细介绍（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2732497.html
