這篇文章主要介紹JS實現為動態添加的元素增加事件功能示例【基于事件委托】，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，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的方式也可以很好的理解
以上是“JS實現為動態添加的元素增加事件功能示例【基于事件委托】”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
