onmouseenter onmouseleave 与 onmouseover onmouseout 区别
前者只生效与绑定的元素 而后者生效于绑定的元素与其子元素

onmouseover onmouseout

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: aqua;
  13.         }
  14.         .box1{
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: bisque;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="box">
  23.         <div class="box1"></div>
  24.     </div>
  25. </body>
  26. <script src="./js/untils.js"></script>
  27. <script>
  28.     var box = document.getElementsByClassName('box')[0],
  29.         box1 = document.getElementsByClassName('box1')[0],
  30.         overCount = 0,
  31.         outCount = 0;
  33.     box.onmouseover = function(e){
  34.         cancelBubble(e);
  35.         overCount++;
  36.         console.log('overCount'+overCount);
  37.     }
  38.     box.onmouseout = function(e){
  39.         cancelBubble(e);
  40.         outCount++;
  41.         console.log('outCount'+outCount);
  42.     }
  43. </script>
  44. </html>

image.png

onmouseenter onmouseleave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
<script src="./js/untils.js"></script>
<script>
    var box = document.getElementsByClassName('box')[0],
        box1 = document.getElementsByClassName('box1')[0],
        overCount = 0,
        outCount = 0;

    box.onmouseenter = function(e){
        // cancelBubble(e);
        overCount++;
        console.log('onmouseenter'+overCount);
    }
    box.onmouseleave = function(e){
        // cancelBubble(e);
        outCount++;
        console.log('onmouseleave'+outCount);
    }
</script>
</html>

image.png

实战 根据鼠标移动改变状态

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <ul class="list">
            <li class="list-item active">
                <div class="card">
                    <div class="title">
                        <a href="">锤子 坚果 Pro 2 黑色 (细红线版) 全面屏双摄6+64GB 全网通</a>
                    </div>

                    <div class="price">￥2299.00</div>
                    <div class="img">
                        <a href=""><img src="./img/1.png" alt=""></a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">锤子 坚果 Pro 2 黑色 (细红线版) 全面屏双摄6+64GB 全网通</a>
                    </div>

                    <div class="price">￥6299.00</div>
                    <div class="img">
                        <a href=""><img src="./img/2.png" alt=""></a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">锤子 坚果 Pro 2 黑色 (细红线版) 全面屏双摄6+64GB 全网通</a>
                    </div>

                    <div class="price">￥5299.00</div>
                    <div class="img">
                        <a href=""><img src="./img/3.png" alt=""></a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">锤子 坚果 Pro 2 黑色 (细红线版) 全面屏双摄6+64GB 全网通</a>
                    </div>

                    <div class="price">￥6299.00</div>
                    <div class="img">
                        <a href=""><img src="./img/4.png" alt=""></a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">锤子 坚果 Pro 2 黑色 (细红线版) 全面屏双摄6+64GB 全网通</a>
                    </div>

                    <div class="price">￥3299.00</div>
                    <div class="img">
                        <a href=""><img src="./img/5.png" alt=""></a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script src="./js/untils.js"></script>
<script src="./js/index.js"></script>
</html>

// 方法一：逐个绑定
// ;(function(doc){
//     var oItems = doc.getElementsByClassName('list-item'),
//         curIdx = 0;

//     var init = function(){
//         bindEvent();
//     }
//     function bindEvent(){
//         len = oItems.length
//         for(var i = 0; i< oItems.length;i++){
//             addEvent(oItems[i],'mouseover',function(){
//                 console.log(curIdx);
//                 oItems[curIdx].className = 'list-item';
//                 curIdx = Array.prototype.indexOf.call(oItems,this);
//                 console.log(curIdx);
//                 oItems[curIdx].className+= ' active';
//             })
//         }
//     }
//     init();
// })(document);

//方法二：事件代理

;(function(doc) {
    var oList = doc.getElementsByClassName('list')[0],
        oItems = oList.getElementsByClassName('list-item'),
        curIdx = 0;

    var init = function() {
        bindEvent();
    }

    function bindEvent() {
        addEvent(oList, 'mouseover', slide);
        addEvent(oList, 'mouseout', slide);
        // addEvent(oList,'mouseover',function(){  写法二
        //     addEvent(document,'mousemove',slide);
        // });

        // addEvent(oList,'mouseout',function(){
        //     removeEvent(document,'mousemove',slide);
        // });
    }


    function slide(e) {
        var e = e || window.event,
            tar = e.target || e.scrElement;
            oParent = getParent(tar,'li');
            thisIdx = Array.prototype.indexOf.call(oItems,oParent);
        // if(curIdx!==thisIdx){
            // console.log(curIdx,thisIdx);
            oItems[curIdx].className = 'list-item';
            curIdx = thisIdx;
            oItems[curIdx].className+= ' active';
        // }
    }

    function getParent(target, element) {
        while (target.tagName.toLowerCase() !== element) {
            target = target.parentNode;
        }
        return target;
    }
    init();
})(document);

事件流的执行顺序

dom事件流 ： 事件流的捕获阶段(不执行); -> 目标阶段(执行)->冒泡阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;  
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<script src="./js/untils.js"></script>
<script>

   // dom事件流 ： 事件流的捕获阶段(不执行); -> 目标阶段(执行)->冒泡阶段

    // window -> document -> box1 -> box2
    // 事件流的捕获过程(不执行);

    // box2            -> box1 -> document -> window
    // 目标阶段(执行)      冒泡阶段

    window.addEventListener('mouseover',function(){
        console.log('window');
    },false)

    document.addEventListener('mouseover',function(){
        console.log('document');
    },false)

    box1.addEventListener('mouseover',function(){
        console.log('box1');
    },false)

    box2.addEventListener('mouseover',function(){
        console.log('box2');
    },false)

</script>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;  
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<script src="./js/untils.js"></script>
<script>
    // 
    window.addEventListener('mouseover',function(){
        console.log('window');
    },true)

    document.addEventListener('mouseover',function(){
        console.log('document');
    },true)

    box1.addEventListener('mouseover',function(){
        console.log('box1');
    },true)

    box2.addEventListener('mouseover',function(){
        console.log('box2');
    },true)
</script>
</html>

image.png

addEvent(oList,’mouseover’,function(){

addEvent(document,’mousemove’,slide);

});

mousemove此写法点击移动的比mouseover更平滑