22_DOM事件委托.html 998 B

1234567891011121314151617181920212223242526272829303132
  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. <ul>
  10. <li>hello world</li>
  11. </ul>
  12. <button>add</button>
  13. <script>
  14. var oBtn = document.getElementsByTagName("button")[0];
  15. var oUl = document.getElementsByTagName("ul")[0];
  16. var oLi = document.getElementsByTagName("li")[0];
  17. oBtn.onclick = function(){
  18. var newLi = document.createElement("li");
  19. oUl.append(newLi);
  20. }
  21. oUl.onclick = function(evnet){
  22. // console.log(evnet)
  23. // event.target 基于事件冒泡 可以捕捉到具体内部哪一个元素触发的事件
  24. // 事件委托 将内部元素的事件委托给父元素进行处理
  25. console.log(evnet.target);
  26. }
  27. oLi.onclick = function(event){
  28. console.log("li")
  29. }
  30. </script>
  31. </body>
  32. </html>