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 相关文章推荐
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 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如何把汉字转化为拼音
2015/12/11 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python结合API实现即时天气信息
2016/01/19 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
pandas针对excel处理的实现
2021/01/15 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书