首页 > 代码库 > 简单的事件委托
简单的事件委托
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="button" value="添加" id="btn1"> 9 <ul id="ul1">10 <li>0001</li>11 <li>0002</li>12 <li>0003</li>13 <li>0004</li>14 </ul>15 <script>16 //优点：性能高；新添加的元素依然会拥有事件17 18 //事件委托：利用冒泡的原理，把事件加到父级上19 //事件源：不管在哪个事件中，只要你操作的哪个元素就是事件源20 var oUl = document.getElementById("ul1");21 var aLi = oUl.getElementsByTagName("li");22 23 oUl.onmouseover = function(ev){24 var oEvent = ev || window.event;25 var target = oEvent.target || oEvent.srcElement;26 if( target.tagName.toLowerCase() == "li" ){27 target.style.backgroundColor = "red";//防止移到ul上也触发28 }29 };30 oUl.onmouseout = function(ev){31 var oEvent = ev || window.event;32 var target = oEvent.target || oEvent.srcElement;33 34 if( target.tagName.toLowerCase() == "li" ){35 target.style.backgroundColor = "";//防止移到ul上也触发36 }37 };38 39 40 var oBtn = document.getElementById("btn1");41 oBtn.onclick = function(){42 var oLi = document.createElement("li");43 oLi.innerHTML = "aaa";44 oUl.appendChild(oLi);45 };46 </script>47 </body>48 </html>
简单的事件委托
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。