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

發(fā)布時(shí)間：2021-02-02 11:47:58 來源：億速云閱讀：258 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JS實(shí)現(xiàn)動態(tài)添加的元素綁定事件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

效果

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

關(guān)于“JS實(shí)現(xiàn)動態(tài)添加的元素綁定事件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽