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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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查看session内容的函数
2008/08/27 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
幼儿园消防演练方案
2014/02/13 职场文书
小学生春游活动方案
2014/08/20 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
初中语文教学研修日志
2015/11/13 职场文书