<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button class="btn">按钮</button> <ul class="ul"> <b>3333333333</b> <h1>33333333333333</h1> <li>111111111111111111</li> <li>111111111111111111</li> <li>111111111111111111</li> <li>111111111111111111</li> </ul> <script> //事件的委派 自己的理解 //给标签绑定事件,新加同样的标签,新加的标签也有这个事件,正常的要写两次事件 //通过找到该类 标签的父标签 找到此标签 一次 绑定事件, 新加的子标签和原有的字标签都有该事件 var btn=document.querySelector(".btn") var ul=document.querySelector(".ul"); ul.onclick=function(e){ if(e.target.nodeName==="LI"){ alert(0) } } btn.onclick=function(){ var li=document.createElement("li"); var strc=document.createTextNode("ttt哈哈哈哈哈哈"); li.appendChild(strc); ul.appendChild(li) } </script> </body> </html>