微客导航 » 文章资讯 » JS如何实现动态添加的元素绑定事件

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

2023-08-09 12:04:04 406

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

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

具体的代码实现如下：

第一：onclick


添加工作经历
获取全部工作




删除

//添加工作经历 functionAddJob(){ vartimestamp=parseInt((newDate()).valueOf());//唯一的标识 console.log(parseInt((newDate()).valueOf())); document.getElementById("joblist").innerHTML+= ` 删除

`; } //删除工作经历 functionDelJob(timestamp){ document.getElementById("job"+timestamp).remove(); } //获取全部工作经历 functionGetJobs(){ varjobs=document.getElementsByClassName("job"); vararr=[]; for(vari=0;i

第二种：

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

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐