js动态添加dom，如何绑定事件

原理

首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，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>

js动态添加dom，如何绑定事件

原理 ​

注意 ​

代码 ​

原理

注意

代码