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