最近做的項目要實現一個動態添加動態刪除的功能，思考了一下，該怎么給動態添加的元素綁定事件。最后覺得有兩種方式比較可靠，第一種是在動態添加的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 });
