首页 > 代码库 > js事件代理（事件委托）最简单的理解
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 //利用事件代理机制,获取当前是第几个item26 // 获取父节点，并为它添加一个click事件27 var ul = document.getElementById("parent-list");28 ul.addEventListener("click",function(e) {29 // 检查事件源e.targe是否为Li30 if(e.target && e.target.nodeName.toLowerCase() == "li") {31 // 打印当前点击是第几个item32 console.log("List item ",e.target.id.replace("post-","")," was clicked!");33 }34 });35 //利用事件代理机制,删除对应的li36 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事件代理（事件委托）最简单的理解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。