js学习总结----事件委托和事件代理

Posted 2020-09-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js学习总结----事件委托和事件代理相关的知识，希望对你有一定的参考价值。

1、什么是事件委托/事件代理

　　利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。

　　具体小案例如下：　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }
        html,body{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        #box{
            position:absolute;
            left:50%;
            top:50px;
            width:100px;
            height:30px;
            margin-left:-50px;
            line-height:30px;
            text-align:center;
            border:1px solid #2489cc;
        }
        #mark{
            position:absolute;
            top:30px;
            left:-1px;
            width:300px;
            height:100px;
            line-height:100px;
            text-align:center;
            background:#ffe470;
            border:1px solid #2489cc;
        }
    </style>
</head>
<body>
    <div id=‘box‘>
        <span>购物车</span>
        <div id="mark" style=‘display:none‘>    
            查看购物车的详细信息
        </div>
    </div>

    <script> 
        var mark = document.getElementById(‘mark‘);
        document.body.onclick = function(e){
            e = e || window.event;
            e.target = e.target || e.srcElement;

            //如果点击的是box或者是#box下的span，我们判断mark是否显示，显示让其隐藏，反之让其显示
            if(e.target.id==="box" || (e.target.tagName.toLowerCase()==="span" && e.target.parentNode.id===‘box‘)){
                if(mark.style.display === "none"){
                    mark.style.display === "block"
                }else{
                    mark.style.display === "none"
                }
                return;
            }
            //如果事件源是#mark，不进行任何的操作
            if(e.target.id==="mark"){
                return;
            }
            mark.style.display === "none"
        }
    </script>
</body>
</html>

以上是关于js学习总结----事件委托和事件代理的主要内容，如果未能解决你的问题，请参考以下文章