js事件代理（事件委托）最简单的理解-CSDN博客

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>