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

时间 2020-06-22

原文原文链接

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

具体的代码实现以下：html

第一：onclickjava

 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>

第二种：事件委托node

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 });