事件委托（41）_$document $body 事件委托-CSDN博客

本文链接：https://blog.csdn.net/qq_45738592/article/details/120708390

* 事件委托（事件代理）

* 利用事件的冒泡传播机制，如果一个容器的后代元素中，很多元素的点击行为（其它事件行为也是）都要做一些处理，此时我们不需要在像以前一样一个个获取一个个的绑定了，我们只需要给容器的CLICK绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的CLICK行为触发，把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而做不同的事情即可

分类导航

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车导航</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        .shop {
            margin: 20px auto;
            width: 200px;
            height: 50px;
        }

        .shop .shopLink {
            position: relative;
            display: block;
            height: 50px;
            line-height: 50px;
            background: lightblue;
            text-align: center;
        }

        .shop .shopLink .shopList {
            display: none;
            position: absolute;
            top: 50px;
            left: 0;
            width: 400px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: lightcoral;
        }

        .shop .shopLink:hover .shopList {
            display: block;
        }
    </style>
</head>
<body>
<div class="shop">
    <a href="javascript:;" class="shopLink">
        我的购物车
        <!--基于CSS完成显示隐藏，需要保证列表是A的子元素，这样从A进入到列表不算离开A，这样列表就不会消失了-->
        <div class="shopList">
            购物车列表
        </div>
    </a>
</div>


</body>
</html>

分类菜单

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分类菜单</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }

        .menuBox {
            margin: 20px auto;
            width: 700px;
            height: 270px;
            border: 1px solid #000;
        }

        .navBox {
            float: left;
            width: 200px;
            background: lightblue;
        }

        .navBox ul li {
            height: 30px;
            line-height: 30px;
        }

        .navBox ul li a {
            display: block;
            padding: 0 10px;
            height: 100%;
            font-size: 14px;
            color: #555;
        }

        .navBox ul li a:hover {
            background: lightcoral;
        }

        .detailBox {
            display: none;
            float: left;
            width: 500px;
            height: 100%;
            background: #EEE;
            font-size: 20px;
        }
    </style>
</head>
<body>
<section class="menuBox">
    <nav class="navBox">
        <ul>
            <li><a href="#" target="_blank">导航1</a></li>
            <li><a href="#" target="_blank">导航2</a></li>
            <li><a href="#" target="_blank">导航3</a></li>
            <li><a href="#" target="_blank">导航4</a></li>
            <li><a href="#" target="_blank">导航5</a></li>
            <li><a href="#" target="_blank">导航6</a></li>
            <li><a href="#" target="_blank">导航7</a></li>
            <li><a href="#" target="_blank">导航8</a></li>
            <li><a href="#" target="_blank">导航9</a></li>
        </ul>
    </nav>
    <div class="detailBox">导航1对应的详情内容</div>
</section>

<script src="js/jquery-1.11.3.min.js"></script>
<script>
    //=>基于事件委托给最外层的盒子的MOUSE-OVER绑定方法，这样不管操作后代元素中的谁的MOUSE-OVER，这个方法都会执行
    let $detailBox = $('.detailBox');
    $(document.body).on('mouseover', function (ev) {
        let target = ev.target,
            tag = target.tagName,
            $target = $(target),
            $pars = $target.parents();//=>获取当前事件源的祖先元素

        //=>如果事件源是NAV-BOX中的A或者LI（让DETAIL-BOX显示）
        let flag = $pars.filter('.navBox').length > 0 ? true : false;//=>TRUE祖先中包含NAV-BOX,FALSE则相反
        if ((tag === 'A' || tag === 'LI') && flag) {
            let val = $target.text().match(/\d+/);
            $detailBox.css('display', 'block').html(`导航${val}对应的内容`);
            return;
        }

        /*//=>如果事件源是DETAIL-BOX或者是它的后代元素，不做处理
        if ($target.hasClass('detailBox') || $pars.filter('.detailBox').length > 0) {
            return;
        }*/

        $detailBox.css('display', 'none');
    });

    $detailBox.on('mouseover', function (ev) {
        ev.stopPropagation();
    });
</script>
</body>
</html>