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 相关文章推荐
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 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
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Hadoop中的Python框架的使用指南
2015/04/22 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
利用python发送和接收邮件
2016/09/27 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
《狐假虎威》教学反思
2014/02/07 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
司仪主持词两篇
2014/03/22 职场文书
网络营销策划方案
2014/06/04 职场文书
法人代表证明书格式
2014/10/01 职场文书
热情服务标语
2014/10/07 职场文书
法人身份证明书
2014/10/08 职场文书
信用卡工资证明范本
2014/10/17 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
高考升学宴主持词
2019/06/21 职场文书