js动态添加的元素绑定事件

最近做的项目要实现一个动态添加动态删除的功能，思考了一下，该怎么给动态添加的元素绑定事件。最后觉得有两种方式比较可靠，第一种是在动态添加的html代码里添加oclick事件，然后给传个唯一的参数来判断点击了哪个，然后做相应的操作，第二种是通过事件委托的原理来处理，事件委托将一个事件侦听器实际绑定到整个容器，然后在单击它时能够访问每个列表项，这种更高效一些

具体的代码实现如下：

第一：onclick

 1 <body>
 2     <button onclick="AddJob()">添加工作经历</button>
 3     <button onclick="GetJobs()">获取全部工作</button>
 4 
 5     <div id="joblist">
 6         <div id="job1" class="job">
 7             <input name="CompanyName" type="text" value="公司1" />
 8             <button onclick="DelJob(1)">删除</button>
 9         </div>
10     </div>
11     <script type="text/javascript">
12         //添加工作经历
13         function AddJob() {
14             var timestamp = parseInt((new Date()).valueOf()); //唯一的标识
15             console.log(parseInt((new Date()).valueOf()));
16             document.getElementById("joblist").innerHTML +=
17                 `<div id="job` + timestamp + `" class="job">
18                      <input name="CompanyName" type="text" value="公司` + timestamp + `" />
19                      <button onclick="DelJob(` + timestamp + `)">删除</button>
20                  </div>`;
21         }
22         //删除工作经历
23         function DelJob(timestamp) {
24             document.getElementById("job" + timestamp).remove();
25         }
26         //获取全部工作经历
27         function GetJobs() {
28             var jobs = document.getElementsByClassName("job");
29             var arr = [];
30             for (var i = 0; i < jobs.length; i++) {
31                 var job = jobs[i];
32                 var companyName = job.children[0].value;
33                 arr.push(companyName);
34             }
35             console.log(arr);
36             alert(arr);
37         }
38     </script>
39 </body>

第二种：事件委托

1 document.getElementById('joblist').addEventListener('click', function (ev) {
2         var target = ev.target || ev.srcElement;
3         if (target.nodeName.toLowerCase() == 'button') {
4             var e = document.getElementById(target.parentNode.id);
5             document.getElementById("joblist").removeChild(e);
6         }
7     });

 

 

 

posted @ 2019-11-06 10:47  leahtao  阅读(1801)  评论(0)  编辑  收藏  举报