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


Posted in Javascript onNovember 12, 2019

这篇文章主要介绍了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如何实现动态添加的元素绑定事件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
gridpanel动态加载数据的实例代码
Jul 18 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Js apply方法详解
Feb 16 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 #Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 #Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 #Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 #Javascript
vue页面切换项目实现转场动画的方法
Nov 12 #Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 #Javascript
vue transition 在子组件中失效的解决
Nov 12 #Javascript
You might like
各种战术和打法的原创者
2020/03/04 星际争霸
php4的session功能评述(一)
2006/10/09 PHP
深入php self与$this的详解
2013/06/08 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JS变量及其作用域
2017/03/29 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python对字典进行排序实例
2014/09/25 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python实现数据写入excel表格
2018/03/25 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python txt文件如何转换成字典
2020/11/03 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
信息专业大学生自我评价分享
2014/01/17 职场文书
自强之星事迹材料
2014/05/12 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
旅游安全责任协议书
2016/03/22 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
Echarts如何重新渲染实例详解
2022/05/30 Javascript
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技