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

Posted

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学习总结----事件委托和事件代理的主要内容,如果未能解决你的问题,请参考以下文章

js中的事件委托/代理

js事件代理(事件委托)最简单的理解

js事件代理(委托)

js事件委托(事件代理)

Js中的事件委托/事件代理

JS——事件委托或代理