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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。