js事件代理（事件委托）最简单的理解
Posted 武侯668
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件代理（事件委托）最简单的理解相关的知识，希望对你有一定的参考价值。
1事件代理：当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。
例如：点击按钮删除对应的条目。
如果给每一个按钮添加事件，极为繁琐，这时候需要用到事件代理。
事件代理是基于浏览器的事件冒泡机制。
下面是对应的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 button{ 8 margin-left: 50px; 9 } 10 li{ 11 width: 300px; 12 } 13 </style> 14 </head> 15 <body> 16 <ul id="parent-list"> 17 <li id="post-1">Item 1<button id="btn1">删除</button></li> 18 <li id="post-2">Item 2<button id="btn2">删除</button></li> 19 <li id="post-3">Item 3<button id="btn3">删除</button></li> 20 <li id="post-4">Item 4<button id="btn4">删除</button></li> 21 <li id="post-5">Item 5<button id="btn5">删除</button></li> 22 <li id="post-6">Item 6<button id="btn6">删除</button></li> 23 </ul> 24 <script> 25 //利用事件代理机制,获取当前是第几个item 26 // 获取父节点，并为它添加一个click事件 27 var ul = document.getElementById("parent-list"); 28 ul.addEventListener("click",function(e) { 29 // 检查事件源e.targe是否为Li 30 if(e.target && e.target.nodeName.toLowerCase() == "li") { 31 // 打印当前点击是第几个item 32 console.log("List item ",e.target.id.replace("post-","")," was clicked!"); 33 } 34 }); 35 //利用事件代理机制,删除对应的li 36 ul.addEventListener("click",function(e) { 37 if(e.target && e.target.nodeName.toLowerCase() == "button"){ 38 ul.removeChild(e.target.parentNode) 39 } 40 }); 41 </script> 42 </body> 43 </html>
以上是关于js事件代理（事件委托）最简单的理解的主要内容，如果未能解决你的问题，请参考以下文章