脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS为动态添加的元素增加事件

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

 更新时间：2018年03月21日 12:13:12   作者：badmoonc  
这篇文章主要介绍了JS实现为动态添加的元素增加事件功能,结合实例形式分析了javascript基于事件委托实现针对动态添加的元素增加事件的相关操作技巧,需要的朋友可以参考下

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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>

运行效果：

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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>

运行效果：

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

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

您可能感兴趣的文章:

相关文章

  • javascript 新闻切换技术

    javascript 新闻切换技术

    javascript 新闻切换技术...
    2007-12-12
  • JavaScript保护密钥的方法详解

    JavaScript保护密钥的方法详解

    在前端js编程中,如果涉及到加密通信、加密算法,经常会用到密钥,但密钥,很容易暴露, 暴露原因：js代码透明,在浏览器中可以查看源码,从中找到密钥,所以本文给大家介绍了前端js中如何保护密钥,需要的朋友可以参考下
    2024-10-10
  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是重量轻的JavaScript库，将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。本文给大家详细介绍Dropzone.js实现文件拖拽上传功能，需要的朋友参考下吧
    2016-11-11
  • js 编程笔记 无名函数

    js 编程笔记 无名函数

    无名函数，其中一个作用可能是生成新的函数对象的引用，主要是用于定义。
    2011-06-06
  • Js中使用hasOwnProperty方法检索ajax响应对象的例子

    Js中使用hasOwnProperty方法检索ajax响应对象的例子

    这篇文章主要介绍了Js中使用hasOwnProperty方法检索ajax响应对象的例子,本文介绍的技巧就是hasOwnProperty方法在ajax请求中的使用,需要的朋友可以参考下
    2014-12-12
  • JS通过位运算实现权限加解密

    JS通过位运算实现权限加解密

    这篇文章主要介绍了JS通过位运算实现权限加解密的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-08-08
  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript中的类(Class)详细介绍

    JavaScript中的类(Class)详细介绍

    这篇文章主要介绍了JavaScript中的类(Class)详细介绍,本文讲解了JavaScript中类的定义、JavaScript中的Constructor(构造函数)、类名等内容,需要的朋友可以参考下
    2014-12-12
  • layui实现三级导航菜单

    layui实现三级导航菜单

    这篇文章主要为大家详细介绍了layui实现三级导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • coffeescript使用的方式汇总

    coffeescript使用的方式汇总

    而来到CoffeeScript的世界，美妙故事再次上演。在写了几行代码后我相信你将不会再想念原生的Javascript了。CoffeeScript包含了许多新特性，当将它与jQuery，node.js,javascript结合时，你会发现一片新天地。
    2015-08-08

最新评论