本文目录

JavaScript 事件委托

🌙
手机阅读
本文目录结构
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="div1" style="background: red">
    <br/>
    <ul id="ul1" style="background: blue">
        <br/>
        <li id="li1" style="background: orange">
            <br/>
            <a href="javascript:;" style="background: olive;display: block;"><br/>1</a>
            <a href="javascript:;" style="background:blueviolet;display: block;"><br/>2</a>
            <a href="javascript:;" style="background: olive;display: block;"><br/>3</a>
            <a href="javascript:;" style="background: chocolate;display: block;"><br/>4</a>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    document.documentElement.onclick=function(event){
        event=event||window.event;
        //事件源委托给documentElement
        target=event.target||event.srcElement;//事件源
        console.log(target.nodeName)
    };

    //下面是动态创建的
    var p=document.createElement("p");
    document.body.appendChild(p);
    p.innerHTML="222312312312";
    /*事件委托也可以实现动态绑定*/
    /*所有的事件,都可以用事件委托来实现;时间委托是一个高级技巧*/
</script>

时间委托N级菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #menu{width: 400px}
        #menu span{display: block;cursor: pointer;}
        #menu span.close:before{content: "[+] ";}
        #menu span.open:before{content: "[·] ";}
        ul li{margin-bottom: 10px; cursor: pointer;}
        span ul li{margin-bottom: 10px;}
    </style>
</head>
<body>
<ul id="menu">
    <li>
        <span>第一:1111111</span>
        <ul>
            <li><span>第一:1111111</span></li>
            <li><span>第二:222222</span></li>
            <li><span>第三:333333</span></li>
            <li><span>第四:444444</span></li>
            <li><span>第五:555555</span></li>
            <li><span>第六:666666</span></li>
        </ul>
    </li>
    <li>
        <span>第二:222222</span>
        <ul>
            <li><span>第一:1111111</span></li>
            <li><span>第二:222222</span></li>
            <li><span>第三:333333</span></li>
            <li><span>第四:444444</span></li>
            <li><span>第五:555555</span></li>
            <li><span>第六:666666</span></li>
        </ul>
    </li>
    <li>
        <span>第三:333333</span>
        <ul>
            <li><span>第一:1111111</span></li>
            <li><span>第二:222222</span></li>
            <li>
                <span>第三:333333</span>
                <ul>
                    <li><span>第一:1111111</span></li>
                    <li><span>第二:222222</span></li>
                    <li><span>第三:333333</span></li>
                    <li><span>第四:444444</span></li>
                    <li><span>第五:555555</span></li>
                    <li><span>第六:666666</span></li>
                </ul>
            </li>
            <li><span>第四:444444</span></li>
            <li><span>第五:555555</span></li>
            <li><span>第六:666666</span></li>
        </ul>
    </li>
    <li>
        <span>第四:444444</span>
        <ul>
            <li><span>第一:1111111</span></li>
            <li><span>第二:222222</span></li>
            <li><span>第三:333333</span></li>
            <li><span>第四:444444</span></li>
            <li><span>第五:555555</span></li>
            <li><span>第六:666666</span></li>
        </ul>
    </li>
    <li>
        <span>第五:555555</span>
        <ul>
            <li><span>第一:1111111</span></li>
            <li><span>第二:222222</span></li>
            <li><span>第三:333333</span></li>
            <li><span>第四:444444</span></li>
            <li><span>第五:555555</span></li>
            <li><span>第六:666666</span></li>
        </ul>
    </li>
    <li>
        <span>第六:666666</span>
        <ul>
            <li><span>第六:第一:1111111</span></li>
            <li><span>第六:第二:222222</span></li>
            <li><span>第六:第三:333333</span></li>
            <li><span>第六:第四:444444</span></li>
            <li><span>第六:第五:555555</span></li>
            <li>
                <span>第六:第六:666666</span>
                <ul>
                    <li><span>>第六:第六:第一:1111111</span></li>
                    <li><span>第六:第六:第二:222222</span></li>
                    <li><span>第六:第六:第三:333333</span></li>
                    <li><span>第六:第六:第四:444444</span></li>
                    <li><span>第六:第六:第五:555555</span></li>
                    <li><span>第六:第六:第六:666666</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>
<script>
    var oSpans=document.getElementById("menu").getElementsByTagName("span");
    for(var i=0;i<oSpans.length;i++){
        var oSapn=oSpans[i];
        var oUl=getNext(oSapn);
        if(oUl&&oUl.nodeName==="UL"){
            oUl.style.display="none";
            oSapn.style.backgroundColor="orange";
            oSapn.className="close"
        }else{
            oSapn.style.backgroundColor="#CCC";
        }

    }
    document.getElementById("menu").onclick=function(event){
        event=event||window.event;
        var target=event.target||event.srcElement;
        if(target.nodeName=="SPAN"){
            var oUl=getNext(target);
            if(oUl&&oUl.nodeName=="UL"){
                if(oUl.style.display=="none"){
                    oUl.style.display="block";
                    target.className="open"
                }else{
                    oUl.style.display="none";
                    target.className="close";
                    /*解决顶级关闭然后打开;第二级和第三级处于打开状态的bug*/
                    if(oUl.getElementsByTagName("UL")){
                        var oUls=oUl.getElementsByTagName("UL");
                        for(var i=0;i<oUls.length;i++){
                            getPre(oUls[i]).className="close";
                            oUls[i].style.display="none";
                        }
                    }
                }
            }
        }
    };

    function getNext(curEle) {//下一个弟弟节点,第一个弟弟节点;
        if ("getElementsByClassName" in window) {
            return curEle.nextElementSibling;
        }
        var next = curEle.nextSibling;
        while (next && next.nodeType !== 1) {
            next = next.nextSibling;
        }
        return next;
    };
    function getPre(curEle) {//上一个哥哥节点;
        if ("getElementsByClassName" in window) {
            return curEle.previousElementSibling;
        }
        var pre = curEle.previousSibling;
        while (pre && pre.nodeType !== 1) {
            pre = pre.previousSibling;
        }
        return pre;
    }
</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了