最近做的项目要实现一个动态添加动态删除的功能，思考了一下，该怎么给动态添加的元素绑定事件。最后觉得有两种方式比较可靠，第一种是在动态添加的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 });
