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

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • JS动态添加元素及绑定事件造成程序重复执行解决
  • javascript实现的动态添加表单元素input,button等(appendChild)
  • js 动态添加元素(div、li、img等)及设置属性的方法
  • 用js动态添加html元素,以及属性的简单实例
  • ASP之处理用Javascript动态添加的表单元素数据的代码
  • JavaScript实现向OL列表内动态添加LI元素的方法
  • JavaScript实现动态添加Form表单元素的方法示例
  • javaScript动态添加Li元素的实例
  • JS中动态添加事件(绑定事件)的代码
  • 多种方法实现JS动态添加事件
  • js动态添加onclick事件可传参数与不传参数
赞 (0)

相关推荐

  • 多种方法实现JS动态添加事件

    方法一.setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 但是IE不支持用 setAttribute 设置某些属性,包括对象属性.集合属性.事件属性,也就是说用 setAttribute 设置 style.onclick.onmouseover 这些属性在 IE 中是行不通的.

  • JavaScript实现动态添加Form表单元素的方法示例

    本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

  • js动态添加onclick事件可传参数与不传参数

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() window.onload = function() { $('btnTest').onclick= function() { test(1)

  • JS动态添加元素及绑定事件造成程序重复执行解决

    JS动态添加元素及绑定事件造成程序重复执行解决

    前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行,很多人在文章里写到了,也说了用off方法来解绑,但都未能点出问题的本质,几乎都忽略了问题的本质其实是事件委托造成的. 话不多说,上点天天看到的代码: 第一种:   $(document).on('click', function (e) { consol.lo

  • JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 复制代码 代码如下: var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 第二种情况 复制代码 代码如下: var tb = document.getElementById("tab1"); if(window.addEventListener){

  • js 动态添加元素(div、li、img等)及设置属性的方法

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解. 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div.li.img 这样的标签.其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始. 一.js 动态添加元素div <div id="parent"

  • 用js动态添加html元素,以及属性的简单实例

    用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.st

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • javaScript动态添加Li元素的实例

    html代码块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>**javaScript动态添加Li元素**</title> <style type="text/css"> ul li{list-style:none;display:block;text-align:left;} ul li span{displ

  • JavaScript实现向OL列表内动态添加LI元素的方法

    本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

  • ASP之处理用Javascript动态添加的表单元素数据的代码

    上一篇文章讲到了动态添加表单元素,这次我们来讲讲怎么样来处理这些动态添加的表单元素传过来的数据! 怎么样动态添加表单元素,我这里就不细说了!不明白的看看上一篇文章http://www.jb51.net/html/200711/23/12856.htm下面是动态添加表单元素的页面代码! 复制代码 代码如下: <html >  <head>  <title>动态添加表单元素BlueShine</title>  </head>  <script 

随机推荐