09 jQuery事件委托&小米购物车

小米购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米购物车</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .shopCart{
            position: absolute;
            height: 50px;
            width: 100px;
            background: #ff6700;
            cursor: pointer;
            top:100px;
            left: 500px;
            text-align: center;
            line-height: 50px;
        }
        .content{
            position: relative;
            height: 200px;
            width: 500px;
            background: #2aabd2;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="shopCart">购物车
            <div class="content"></div>
        </div>

    </div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function (e) {
            /*
            $('.shopCart').mouseenter(function (e) {
                $('.content').stop().slideDown(500);
                e.stopPropagation();
            });
            $('.shopCart').mouseleave(function (e) {
                $('.content').stop().slideUp(500);
                e.stopPropagation();
            });
            */
            // 合成事件  mouseenter mouseleave   hover(funOver,funOut)
            $('.shopCart').hover(function (e) {
                $('.content').stop().slideDown(500);
                e.stopPropagation();
            },function (e) {
                $('.content').stop().slideUp(500);
                e.stopPropagation();
            });
        })
    </script>
</body>
</html>

 

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style type="text/css">
        .box{
            position: absolute;
            top: 100px;
            left: 200px;
            height:200px;
            width: 300px;
            background-color: #ff6700;
            }
        ul{
            position:relative;
            list-style: none;
        }
        li{
            position:relative;
            cursor: pointer;
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <button>添加</button>
        <ul>
            <li>晓钢</li>
            <li>晓红</li>
            <li>晓名</li>
        </ul>
    </div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function (e) {
            $('button').click(function (e) {
                $('ul').append('<li>晓均</li>');
            });

            // 么有事件委托的情况下，当新增加元素li时，li不会绑定li的事件
            /*
            $('li').click(function (e) {
                // e.stopPropagation();
                alert($(e.target).text());
            });
            */

            // 用事件委托的情况下，当新增加元素li时，li会绑定li的事件  等于li的事件委托给了ul，
            // 不论追加多少li，都会绑定这个委托的事件
            $('ul').on('click',$('ul>li'),function (e) {
                alert($(e.target).text());
                e.stopPropagation();
            });
        })
    </script>
</body>
</html>

 

posted @ 2019-07-02 11:47  毛斯钢  阅读(373)  评论(0)  编辑  收藏  举报