JS实现为动态添加的元素增加事件功能示例【基于事件委托】


Posted in Javascript onMarch 21, 2018

本文实例讲述了JS实现为动态添加的元素增加事件功能。分享给大家供大家参考,具体如下:

我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  document.getElementById('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

运行效果:

JS实现为动态添加的元素增加事件功能示例【基于事件委托】

比如这样,通过for循环给li添加的事件无法绑定到新增的li上边,详细的原因这里不做解释。那么这个如何解决呢,其实办法也简单,就是通过事件委托的方式去解决,直接上代码,上面的代码简单改造:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  var outUl=document.getElementById('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  document.getElementById('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  outUl.addEventListener('click',function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

运行效果:

JS实现为动态添加的元素增加事件功能示例【基于事件委托】

这样一来,即便是新增的li点击事件也可以被触发了,不过在这里jquery的详细方式就不做介绍了,原生js跟jquery的解决原理其实是一样的。相信大家把原生的理解了,jquery的方式也可以很好的理解

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
javascript中clone对象详解
Dec 03 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
详解Angular 4.x Injector
May 04 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
js canvas实现俄罗斯方块
Oct 11 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
JS实现遍历不规则多维数组的方法
Mar 21 #Javascript
vue项目关闭eslint校验
Mar 21 #Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 #Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 #Javascript
JS代码实现电脑配置检测功能
Mar 21 #Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 #Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
行政人员岗位职责
2013/12/08 职场文书
办理居住证介绍信
2014/01/15 职场文书
初二生物教学反思
2014/02/03 职场文书
给校长的建议书100字
2014/05/16 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
房屋租赁协议书
2014/10/18 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
django学习之ajax post传参的2种格式实例
2021/05/14 Python