【原生js】js动态添加dom，如何绑定事件

时间：2023-08-19 10:28:08

首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，js动态添加dom以后，这些dom并没有绑定事件，这个时候最简单的一个办法就是：将绑定事件的方法封装到一个函数A中，在动态添加完dom以后立即执行一次函数A即可。

需要注意的是，在你可能同时需要添加许多的dom，不要添加一个就执行一次函数A，这样会增加浏览器的负载，你需要在所有dom添加完以后在执行函数A，例如你用一个for循环遍历dom组合并拼接成一个字符串，然后添加到某个父级dom里面，这个时候你需要在循环外添加一次就可以了。

　　代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>添加div并绑定点击事件</title>

     <style>

         div.btn{

             width: 200px;

             height: 50px;

             line-height: 50px;

             text-align: center;

             border: solid 1px #000;

             cursor: pointer;

         }

         div.innerDiv{

             width: 50px;

             height: 50px;

             background-color: black;

             margin: 10px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <div class="aa">

     <div class="btn">添加div并绑定点击事件</div>

     <div class="outerDiv"></div>

 </div>

 <script>

     function getClass(classname) {

         return document.getElementsByClassName(classname);

     }

     getClass('btn')[0].onclick=function () {

         addDom();

     }

 //    将点击事件封装为函数

     function funA() {

         for(var i=0;i<getClass('innerDiv').length;i++){

             getClass('innerDiv')[i].onclick=function () {

                 alert(this.innerText);

             }

         }

     }

 //    将添加dom封装为函数

     function addDom() {

         var oldHtml='';

         for(var j=0;j<6;j++){

             oldHtml+='<div class="innerDiv">'+j+'</div>'

         }

         getClass('outerDiv')[0].innerHTML=oldHtml;

         funA();

     }

 //    如果将函数A放在这里就不会起作用的

 //    funA();

 </script>

 </body>

 </html>

个人博客：[**午后南杂**](http://recoluan.gitlab.io)

相关文章