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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
传智播客学习之JavaScript基础篇
Nov 13 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
JavaScript实现星级评分
Jan 12 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
vue跨域解决方法
Oct 15 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
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
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
分享3个php获取日历的函数
2015/09/25 PHP
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue自定义指令用法经典实例小结
2019/03/16 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python实现文件复制删除
2016/04/19 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
对python中的argv和argc使用详解
2018/12/15 Python
详解Django CAS 解决方案
2019/10/30 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
经典演讲稿范文
2013/12/30 职场文书
公司委托书格式范文
2014/04/04 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Python Matplotlib库实现画局部图
2021/11/17 Python
详解pytorch创建tensor函数
2022/03/22 Python