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 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
vue 虚拟DOM的原理
Oct 03 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
详解Python中的多线程编程
2015/04/09 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Pyqt5自适应布局实例
2019/12/13 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
会议邀请函范文
2014/01/09 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
运动会稿件100字
2014/09/24 职场文书
风之谷观后感
2015/06/11 职场文书
创业计划书之花店
2019/09/20 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android