19.事件委托.html 978 B

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <button>添加</button>
  10. <ul>
  11. <li>111</li>
  12. <li>222</li>
  13. <li>333</li>
  14. </ul>
  15. <script>
  16. var uls = document.getElementsByTagName("ul");
  17. var lis = document.querySelectorAll("ul li");
  18. var btn = document.querySelector("button");
  19. btn.onclick = function() {
  20. var li1 = document.createElement("li");
  21. li1.innerText = Math.round(Math.random() * 9 + 1);
  22. uls[0].appendChild(li1);
  23. console.log(uls,"走")
  24. }
  25. for(var i=0;i<uls.length;i++) {
  26. uls[i].onclick = function(eve) {
  27. console.log(eve)
  28. if(eve.target.nodeName == 'LI') {
  29. alert(eve.target.innerText)
  30. }
  31. }
  32. }
  33. </script>
  34. </body>
  35. </html>