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 添加节点的几种方法介绍
Sep 04 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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
php xml文件操作实现代码(二)
2009/03/20 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
php上传excel表格并获取数据
2017/04/27 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python中logging包的使用总结
2018/02/28 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python中return的返回和执行实例
2019/12/24 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
校园安全检查制度
2014/02/03 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
小型婚礼主持词
2015/06/30 职场文书
小学六年级毕业感言
2015/07/30 职场文书