zoukankan      html  css  js  c++  java
  • 【原生js】js动态添加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>

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

  • 相关阅读:
    CF1394A Boboniu Chats with Du 题解
    P3377 【模板】左偏树(可并堆)题解
    P2152 [SDOI2009]SuperGCD 题解
    在其他模块中调用代码
    教程:创建Go模块
    Go入门
    反悔贪心
    codeforces 1569 E. Playoff Restoration (meet-in-the-middle)
    codeforces 1036 F. Relatively Prime Powers (容斥+精度处理+大数边界处理)
    icpc沈阳2020 H. The Boomsday Project (dp+二分)
  • 原文地址:https://www.cnblogs.com/luanhewei/p/6038198.html
Copyright © 2011-2022 走看看