| 1234567891011121314151617181920212223242526272829303132 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <ul>
- <li>hello world</li>
- </ul>
- <button>add</button>
- <script>
- var oBtn = document.getElementsByTagName("button")[0];
- var oUl = document.getElementsByTagName("ul")[0];
- var oLi = document.getElementsByTagName("li")[0];
- oBtn.onclick = function(){
- var newLi = document.createElement("li");
- oUl.append(newLi);
- }
- oUl.onclick = function(evnet){
- // console.log(evnet)
- // event.target 基于事件冒泡 可以捕捉到具体内部哪一个元素触发的事件
- // 事件委托 将内部元素的事件委托给父元素进行处理
- console.log(evnet.target);
- }
- oLi.onclick = function(event){
- console.log("li")
- }
- </script>
- </body>
- </html>
|