JS如何实现动态添加的元素绑定事件

网络编程 2024/11/8 佚名

3 2 1

这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

具体的代码实现如下：

第一：onclick

<body>
  <button onclick="AddJob()">添加工作经历</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">
    //添加工作经历
    function AddJob() {
      var timestamp = parseInt((new Date()).valueOf()); //唯一的标识
      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>`;
    }
    //删除工作经历
    function DelJob(timestamp) {
      document.getElementById("job" + timestamp).remove();
    }
    //获取全部工作经历
    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);
    }
  });

效果