jQuery-鼠标事件

最新推荐文章于 2022-04-10 16:46:18 发布

上头upup

最新推荐文章于 2022-04-10 16:46:18 发布

阅读量147

点赞数

分类专栏： jQuery 文章标签： jQuery-鼠标事件

本文链接：https://blog.csdn.net/qq_45802159/article/details/103244915

版权

jQuery 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            margin: 80px auto 0;
            background-color: blue;
            border: 1px solid #666;
        }
    </style>
</head>
<body>

    
    <div id="box"></div>
    

    <script src="./jquery.js"></script>
    <script>
        // 鼠标事件
        $('#box').mousedown(function (event) {

            console.log(event.type)
            console.log(event)

        }).mouseup(function (event) {

            console.log(event.type)

        }).click(function (event) {

            console.log(event.type)
            
        }).dblclick(function (event) {

            console.log(event.type)
            
        }).mouseenter(function (event) {
            // 鼠标刚刚进入元素时触发
            console.log(event.type)
        }).mouseover(function (event) {
            // 鼠标移动到元素上时触发
            console.log(event.type)
        }).mousemove(function(event) {
            // 鼠标在元素上移动时触发
            console.log(event.type)
        }).mouseout(function (event) {
            // 鼠标刚刚移出元素时触发
            console.log(event.type)
        }).mouseleave(function (event) {
            // 鼠标已经离开元素时触发
            console.log(event.type)
        });

        // 使用 JS 实现 hover 效果：
        // $('#box').mouseenter(function () {
        //     $(this).css('background-color', 'red')
        // }).mouseleave(function() {
        //     $(this).css('background-color', 'blue')
        // });

        // jQ 考虑到我们可能要经常使用 JS 实现 hover 效果，因此为我们提供一个简便方法，该方法实际上是 mouseenter 和 mouseleave 事件的组合。
        $('#box').hover(function (event) {
            console.log(event.type)  // mouseenter
            $(this).css('background-color', 'red')
        }, function (event) {
            console.log(event.type)  // mouseleave
            $(this).css('background-color', 'blue')
        })

    </script>
</body>
</html>