原生jsjs动态添加dom，如何绑定事件
Posted reco_luan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生jsjs动态添加dom，如何绑定事件相关的知识，希望对你有一定的参考价值。
首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，js动态添加dom以后，这些dom并没有绑定事件，这个时候最简单的一个办法就是：将绑定事件的方法封装到一个函数A中，在动态添加完dom以后立即执行一次函数A即可。
需要注意的是，在你可能同事需要添加许多的dom，不要添加一个就执行一次函数A，这样会增加浏览器的负载，你需要在所有dom添加完以后在执行函数A，例如你用一个for循环遍历dom组合并拼接成一个字符串，然后添加到某个父级dom里面，这个时候你需要在循环外添加一次就可以了。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>添加div并绑定点击事件</title> 6 <style> 7 div.btn{ 8 width: 200px; 9 height: 50px; 10 line-height: 50px; 11 text-align: center; 12 border: solid 1px #000; 13 cursor: pointer; 14 } 15 div.innerDiv{ 16 width: 50px; 17 height: 50px; 18 background-color: black; 19 margin: 10px; 20 cursor: pointer; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="aa"> 26 <div class="btn">添加div并绑定点击事件</div> 27 <div class="outerDiv"></div> 28 </div> 29 <script> 30 function getClass(classname) { 31 return document.getElementsByClassName(classname); 32 } 33 getClass(‘btn‘)[0].onclick=function () { 34 addDom(); 35 } 36 // 将点击事件封装为函数 37 function funA() { 38 for(var i=0;i<getClass(‘innerDiv‘).length;i++){ 39 getClass(‘innerDiv‘)[i].onclick=function () { 40 alert(this.innerText); 41 } 42 } 43 } 44 // 将添加dom封装为函数 45 function addDom() { 46 var oldHtml=‘‘; 47 for(var j=0;j<6;j++){ 48 oldHtml+=‘<div class="innerDiv">‘+j+‘</div>‘ 49 } 50 getClass(‘outerDiv‘)[0].innerHTML=oldHtml; 51 funA(); 52 } 53 // 如果将函数A放在这里就不会起作用的 54 // funA(); 55 </script> 56 </body> 57 </html>
以上是关于原生jsjs动态添加dom，如何绑定事件的主要内容，如果未能解决你的问题，请参考以下文章