这篇文章将为大家详细讲解有关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);
}
});效果
关于“JS实现动态添加的元素绑定事件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
