首頁 > 開發者 > JavaScript
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>
運行效果：
比如這樣，通過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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
