JS实现为动态添加的元素增加事件功能示例,JS实现为动态创建的元素添加事件操作示例

正文实例陈说了JS达成为动态增进的成分扩大事件效率。分享给我们供我们参照他事他说加以考察,具体如下:

JS实现为动态添加的元素增加事件功能示例,JS实现为动态创建的元素添加事件操作示例。JS完结为动态增加的要素扩大事件功用示例【基于事件委托】,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>

运转作效果果:

yzc888 1

举例那样,通过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>

yzc888,运营作效果果:

yzc888 2

那样一来,即就是增创的li点击事件也足以被触发了,不过在那边jquery的详尽措施就不做牵线了,原生js跟jquery的缓慢解决原理其实是均等的。相信大家把原生的通晓了,jquery的措施也得以很好的精通

PS:有关javascript事件表达可参照本站javascript事件与成效表达大全:

越来越多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面成分操作本事总括》、《JavaScript操作DOM本领总括》、《JavaScript查找算法技能总括》、《JavaScript数据结构与算法才能计算》、《JavaScript遍历算法与本事总括》及《JavaScript错误与调治技术计算》

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

本文实例陈述了JS达成为动态增加的要素增添事件成效。分享给大家供…

本文实例汇报了JS达成为动态创设的成分增加事件操作。分享给大家供我们参谋,具体如下:

何以要用事件委托

1、当大家给种种成分三个监听事件时,监听器太多,占用内部存款和储蓄器。

2、成分变化时, 相应的也要追加监听器,较为麻烦。

于是大家用事件委托,在肯定的间隔内,只要求贰个监听器监听父成分,运用父成分的e.target属性可以监听到持有的子成分,且当子成分变化时,监听器没有供给退换。

咱俩在日常开支中偶尔会通过js创设一些要素,不过借使采用原有的for循环给成立的节点加多事件的章程往往行不通:

html中一向生成的要素,增多事变,我们都理解,但是如何为贰个动态变化的因素增添事件呢,jquery中的live主意能够做到那或多或少

举例

var div = document.querySelector(‘DIV’)    //取到div

div.addEventListener(‘click’,function(e){  //监听父成分:div

var d = e.target                        //e.target 点击成分e.currentTarget 监听的父成分

while(d.tagName !==’H2′){                //H2 是们实在要监听的要素

d = d.parentNode                     
/*要是还是不是就网络一层一层找父元素,由此可知正是经过一雨后苦笋算法(循环决断)找到我们实际要监听的要素*/

if(d===div){                         
/*果往上找到了父成分div还是未有找笔者大家须求监听的H2就跳出null,因为最后再往上html到document之上的tagName就是null,这里能够以平复div决断,也能够以body恐怕html标签剖断,只是div是最优。*/

d=null

break;

}}

if(d){

console.log(‘监听成功,你点击的是div里面包车型大巴h2’)

}else{

console.log(‘你点击的不是div里面包车型客车h2’)

}

})

<!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>

实际完成能够在demo中看到

运作效果:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net - JS实现为动态创建的元素添加事件</title>
    <script src="js/lib/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <button id="btn">添加事件</button>
    <div id="panel"></div>
    <script>
//   js原生实现
//     var btn=document.getElementById("btn");
//     btn.onclick=function(){
//       var arr= [];
//       for(var i=0;i<10;i++){
//         arr.push("<p id='nep'>"+i+"</p>");
//       }
//
//     document.getElementById("panel").innerHTML=arr.join('<br/>');
//     }
//
      //jquery部分实现
      $("#btn").click(function(){
        var arr= [];
        for(var i=0;i<10;i++){
          arr.push("<p id='nep'>"+i+"</p>");
        }
        $("#panel").html(function(){
          return arr.join("<br/>");
        });
      });
      //为动态创建的html标签元素添加事件
      $("#nep").live("click",function(){
        var that=$(this);//获取当前点击的this对象
        console.log(that.text());
      });
    </script>
  </body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图