JS的事件动态绑定机制

最新推荐文章于 2021-08-17 17:14:15 发布

weixin_30763397

最新推荐文章于 2021-08-17 17:14:15 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/sylz/p/5745984.html

版权

动态添加标签+动态添加事件

　　window.οnlοad=function(){

　　　　（已存在元素节点）事件绑定；

　　　　（未来元素节点）事件绑定；

　　}

　　它会扫描元素节点，如果元素节点存在（静态写好的），就可以绑定了；如果元素节点不存在，是后来动态添加的就不会执行。

　　所以，我们不能将后来添加的元素的事件绑定像已存在元素节点的绑定一样，他的元素节点的添加要和事件绑定的代码放在一起。

代码实现：微博发布功能，微博最新发布的在上边，可以删除。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*动态添加样式,可以先静态设置,然后删除标签元素节点进行动态添加,样式保留,
        这样的话添加元素节点之后,如果样式是class,则要给元素节点添加样式,
        如果样式是标签  那就不用对添加的标签进行修改了*/
            
            * {
                margin: 0;
                padding: 0;
            }
            
            #box {
                width: 600px;
                border: 1px solid gray;
                /*border  可以不给高度,让高度通过儿子元素撑起来*/
                margin: 0 auto;
                padding: 30px 0;
            }
            
            textarea {
                width: 450px;
                height: 200px;
                resize: none;
                outline: none;
            }
            
            #box ul {
                list-style: none;
            }
            
            #box ul li {
                width: 450px;
                line-height: 30px;
                border-bottom: 1px dashed #ccc;
                margin-left: 80px;
            }
            
            #box ul li a {
                float: right;
                font: 400 12px/30px "微软雅黑";
                color: gray;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                function getClass(classname) {
                    if(document.getElementsByClassName) {
                        return document.getElementsByClassName(classname);
                    }

                    var classNameArr = [];
                    var dom = document.getElementsByTagName("*");
                    for(var i = 0; i < dom.length; i++) {
                        var classArr = dom[i].className.split(" ");
                        console.log(typeof classArr);
                        console.log(classArr.length);
                        for(var j = 0; j < classArr.length; j++) {
                            if(classArr[j] == classname) {
                                classNameArr.push(dom[i]);
                                break;
                            }
                        }
                    }
                    return classNameArr;
                }

                function $(id) {
                    return document.getElementById(id);
                }

                var newul = document.createElement("ul");
                $("box").appendChild(newul); //点击之前把ul创建好  不然会点击一次创建一次ul

                $("btn").onclick = function() {
                        var txts = document.getElementsByName("txt");
                        if(txts[0].value == "") {
                            alert("你还没有输入内容！");
                            return;
                        } else {
                            var ul = $("box").getElementsByTagName("ul")[0];
                            var ul_childs = ul.children;
                            var li = document.createElement("li");
                            //                        var a=document.createElement("a");
                            //                        a.innerText="删除";
                            //                        a.href="javascript:;";
                            //                        li.appendChild(a);
                            //                        li.innerHTML=txts[0].value;
                            //                        还可以这么添加a标签
                            li.innerHTML = txts[0].value + "<a href='javascript:;'>删除</a>";
                            txts[0].value = "";
                            if(ul_childs == null) { //ul_childs.length==0
                                ul.appendChild(li);
                            } else {
                                ul.insertBefore(li, ul_childs[0]);
                            }
                        }
                        var as = $("box").getElementsByTagName("a");
                        for(var i = 0; i < as.length; i++) {
                            as[i].onclick = function() { //因为a是动态添加的 所以会绑定失效
                                //直接移除a标签的父亲即可  
                                //                        this.parentNode
                                var ul = $("box").getElementsByTagName("ul")[0];
                                ul.removeChild(this.parentNode);
                            }
                        }
                    }
                    //不执行原因是    因为a是动态添加的，而window.onload是一开始就要搜扫描的，
                    //                扫描到的话就可以绑定,例如按钮的绑定事件
                    //                扫描不到的话,就不能绑定,比如a标签的onclick
                var as = $("box").getElementsByTagName("a");
                for(var i = 0; i < as.length; i++) {
                    as[i].onclick = function() { //因为a是动态添加的 所以会绑定失效
                        //直接移除a标签的父亲即可  
                        //                        this.parentNode
                        var ul = $("box").getElementsByTagName("ul")[0];
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        </script>
    </head>

    <body>
        <div id="box">
            微博发布：
            <textarea name="txt" rows="" cols=""></textarea>
            <button id="btn">发布</button>
        </div>
    </body>

</html>

转载于:https://www.cnblogs.com/sylz/p/5745984.html

weixin_30763397

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS的事件动态绑定机制

动态添加标签+动态添加事件　　window.onload=function(){　　　　（已存在元素节点）事件绑定；　　　　（未来元素节点）事件绑定；　　}　　它会扫描元素节点，如果元素节点存在（静态写好的），就可以绑定了；如果元素节点不存在，是后来动态添加的就不会执行。　　所以，我们不能将后来添加的元素的事件绑定像已存在元素节点的绑定一样，他的元素节点的添加要和事件绑定的...
复制链接

扫一扫