首頁 >web前端 >js教程 >JS用事件委託元素增加事件

JS用事件委託元素增加事件

php中世界最好的语言原創: 2018-05-09 10:35:261528瀏覽

這次帶給大家JS用事件委託給元素增加事件，JS用事件委託給元素增加事件的注意事項有哪些，下面就是實戰案例，一起來看一下。

我們有時會在日常開發中透過js創建一些元素，但是如果使用原始的for循環為創建的節點添加事件的方法往往行不通：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>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>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的方式也可以很好的理解

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！