这篇文章主要介绍了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);
}
});
效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容