jQuery学习笔记16-移入移出事件

Bertha 。 2024-04-17 22:06 9阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery移入移出事件</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .father{
                width: 200px;
                height: 200px;
                background: red;
            }
            .son{
                width: 100px;
                height: 100px;
                background: blue;
            }
        </style>
    
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                * 移入移出事件
                * 1.mouseover、mouseout移入移出，移动到子元素时，会触发事件
                * 2.mouseenter、mouseleave移入移出，移动到子元素时，不会触发事件
                * 3.hover传入两个参数，第一个参数表示移入触发的事件，第二个参数表示移出触发的事件。
                * hover传入一个参数，移入移出都会触发该事件
                * 注意：hover移动到子元素时，不会触发事件
                * */
                // //mouseover、mouseout移入移出，移动到子元素时，会触发事件
                // 移入监听
                // $(".father").mouseover(function () {
                //     console.log("移入");
                // });
                // 移出监听
                // $(".father").mouseout(function () {
                //     console.log("移出");
                // });
                // //mouseenter、mouseleave移入移出，移动到子元素时，不会触发事件
                // 移入监听
                // $(".father").mouseenter(function () {
                //     console.log("移入");
                // });
                // 移出监听
                // $(".father").mouseleave(function () {
                //     console.log("移出");
                // });
    
                // //hover传入两个参数，第一个参数表示移入触发的事件，第二个参数表示移出触发的事件
                // 移动到子元素时不会触发事件
                // $(".father").hover(function () {
                //     console.log("移入");
                // },
                // function () {
                //     console.log("移出");}
                //     );
    
                //hover传入一个参数，移入移出都会触发该事件
                $(".father").hover(function () {
                    console.log("移入、移出");
                }
                    );
            })
    
        </script>
    </head>
    <body>
    <div class="father">
        <div class="son">
    
        </div>
    </div>
    </body>
    </html>