【原生js】js動態添加dom，如何綁定事件

時間 2019-12-10

原文原文鏈接

首先要明白瀏覽器在加載頁面的時候是按順序來加載的，這樣以來就很清楚了，js動態添加dom之後，這些dom並無綁定事件，這個時候最簡單的一個辦法就是：將綁定事件的方法封裝到一個函數A中，在動態添加完dom之後當即執行一次函數A便可。html

須要注意的是，在你可能同時須要添加許多的dom，不要添加一個就執行一次函數A，這樣會增長瀏覽器的負載，你須要在全部dom添加完之後在執行函數A，例如你用一個for循環遍歷dom組合並拼接成一個字符串，而後添加到某個父級dom裏面，這個時候你須要在循環外添加一次就能夠了。git

　　代碼以下：瀏覽器

 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>