快捷導(dǎo)航

JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件

更新時(shí)間：2019年11月12日 15:30:01 作者：里哈哈T

這篇文章主要介紹了JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

最近做的項(xiàng)目要實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加動(dòng)態(tài)刪除的功能，思考了一下，該怎么給動(dòng)態(tài)添加的元素綁定事件。最后覺(jué)得有兩種方式比較可靠，第一種是在動(dòng)態(tài)添加的html代碼里添加oclick事件，然后給傳個(gè)唯一的參數(shù)來(lái)判斷點(diǎn)擊了哪個(gè)，然后做相應(yīng)的操作，第二種是通過(guò)事件委托的原理來(lái)處理，事件委托將一個(gè)事件偵聽(tīng)器實(shí)際綁定到整個(gè)容器，然后在單擊它時(shí)能夠訪問(wèn)每個(gè)列表項(xiàng)，這種更高效一些

具體的代碼實(shí)現(xiàn)如下：

第一：onclick

<body>
  <button onclick="AddJob()">添加工作經(jīng)歷</button>
  <button onclick="GetJobs()">獲取全部工作</button>

  <div id="joblist">
    <div id="job1" class="job">
      <input name="CompanyName" type="text" value="公司1" />
      <button onclick="DelJob(1)">刪除</button>
    </div>
  </div>
  <script type="text/javascript">
    //添加工作經(jīng)歷
    function AddJob() {
      var timestamp = parseInt((new Date()).valueOf()); //唯一的標(biāo)識(shí)
      console.log(parseInt((new Date()).valueOf()));
      document.getElementById("joblist").innerHTML +=
        `<div id="job` + timestamp + `" class="job">
           <input name="CompanyName" type="text" value="公司` + timestamp + `" />
           <button onclick="DelJob(` + timestamp + `)">刪除</button>
         </div>`;
    }
    //刪除工作經(jīng)歷
    function DelJob(timestamp) {
      document.getElementById("job" + timestamp).remove();
    }
    //獲取全部工作經(jīng)歷
    function GetJobs() {
      var jobs = document.getElementsByClassName("job");
      var arr = [];
      for (var i = 0; i < jobs.length; i++) {
        var job = jobs[i];
        var companyName = job.children[0].value;
        arr.push(companyName);
      }
      console.log(arr);
      alert(arr);
    }
  </script>
</body>

第二種：

document.getElementById('joblist').addEventListener('click', function (ev) {
    var target = ev.target || ev.srcElement;
    if (target.nodeName.toLowerCase() == 'button') {
      var e = document.getElementById(target.parentNode.id);
      document.getElementById("joblist").removeChild(e);
    }
  });

效果