记录一下js事件委托的写法！

 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     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12             list-style: none;
13         }
14         #demo {
15             width: 300px;
16             position: relative;
17             left: 50%;
18             margin-left: -150px;
19             margin-top: 20px;
20         }
21         #demo li {
22             font-size: 30px;
23             font-weight: bolder;
24             text-align: center;
25             height: 50px;
26             line-height: 50px;
27             margin: 10px;
28             border: 1px solid silver;
29             overflow: hidden;
30         }
31         input {
32             width: 200px;
33             position: relative;
34             left: 50%;
35             margin-left: -100px;
36             margin-top: 20px;
37             display: block;
38             text-align: center;
39         }
40         #content {
41             font-size: 25px;
42         }
43         #sub {
44             font-size: 18px;
45         }
46     </style>
47 </head>
48 <body>
49     <ul id="demo">
50         <li>11111</li>
51         <li>22222</li>
52         <li>33333</li>
53         <li>44444</li>
54         <li>55555</li>
55     </ul>
56     <input id="content" type="text" placeholder="输入内容" value="">
57     <input id="sub" type="button" value="添加内容">
58     <script>
59         window.onload = function(){
60             var demo = document.getElementById("demo");
61             var content = document.getElementById("content");
62             var sub = document.getElementById("sub");
63             demo.onclick = function (event) {
64                 var e = event || window.event;
65                 var target = e.target ||e.srcElement;
66                 // nodeName当前元素节点名  toLowerCase转换为小写
67                 // console.log(target.innerHTML);
68                 if(target.nodeName.toLowerCase() == "li"){
69                     console.log(target.innerHTML);
70                 }
71             }
72             sub.onclick = function(){
73                 var txt = content.value;
74                 var temp = document.createElement("li");
75                 temp.innerHTML = txt;
76                 demo.appendChild(temp);
77             }
78         }
79     </script>
80 </body>
81 </html>
记录一下js事件委托的写法！

猜你喜欢
