从这一节开始，我们正式开始实操jQuery中的各种事件。事件操作是jQuery核心之一，也是本书的重中之重。

在jQuery中，常见的鼠标事件如下表所示。

鼠标事件
事件 说明
click 鼠标单击事件
mouseover 鼠标移入事件
mouseout 鼠标移出事件
mousedown 鼠标按下事件
mouseup 鼠标松开事件
mousemove 鼠标移动事件

鼠标事件非常多，这里我们只列出最实用的，免得增加大家的记忆负担。从上表可以看出，jQuery事件比JavaScript事件只是少了“on”前缀。例如鼠标单击事件在JavaScript中是onclick，而在jQuery中是click。

jQuery事件的语法很简单，我们都是往事件方法中插入一个匿名函数function(){}，如图所示。

一、鼠标单击

单击事件click，我们在之前已经接触过非常多了，例如点击某个按钮弹出一个提示框。这里要特别注意一点，单击事件不只是按钮才有，我们可以为任何元素添加单击事件！

举例：为div元素添加单击事件

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div 
        {
            display: inline-block;
            width: 80px;
            height: 24px;
            line-height: 24px;
            font-family:"微软雅黑";
            font-size:15px;
            text-align: center;
            border-radius: 3px;
            background-color: deepskyblue;
            color: White;
            cursor: pointer;
        }
        div:hover {background-color: dodgerblue;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").click(function(){
                alert("玩我么？")
            })
        })
    </script>
</head>
<body>
    <div>调试代码</div>
</body>
</html>

浏览器预览效果如图所示。

分析：

这里我们使用div元素模拟出一个按钮，并且为它添加了单击事件。当我们点击【调试代码】按钮之后，就会弹出提示框。之所以举这个例子，也是给小伙伴们说明一点：我们都可以为任何元素添加单击事件！

在实际开发中，为了获得更好的用户体验，我们一般不会使用表单按钮，而更倾向于使用其他元素结合CSS模拟出来。因为表单按钮的外观实在令人不敢恭维。

举例：自动触发点击事件

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                alert("欢迎来到绿叶学习网！");
            }).click();
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮">
</body>
</html>

浏览器预览效果如图所示。

分析：

在这个例子中，我们使用click()方法自动触发鼠标点击事件。在实际开发中，自动触发事件这个小技巧非常有用，像我们常见的图片轮播效果中就用到。

二、鼠标移入和鼠标移出

当用户将鼠标移入到某个元素上面时，就会触发mouseover事件。如果将鼠标移出某个元素时，就会触发mouseout事件。mouseover和mouseout平常都是形影不离的。

mouseover和mouseout分别用于控制鼠标“移入”和“移出”这两种状态。例如在下拉菜单导航中，鼠标移入会显示二级导航，鼠标移出则会收起二级导航。

举例：移入移出

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").mouseover(function(){
                $(this).css("color", "red");
            })
            $("div").mouseout(function () {
                $(this).css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>

浏览器预览效果如图所示。

分析：

这里的(this)指向的其实就是触发当前事件的元素，也就是div元素。在这个例子中，(this)等价于$(“div”)。

$(this)的使用是非常复杂的，这里我们只是让初学者熟悉一下。在下一章再给小伙伴们详细讲解。

上面这个例子虽然简单，但是方法已经交给大家了。大家可以尝试使用mouseover和mouseout这两个事件来设计下拉菜单效果，考验能力的时候到了。

举例：链式调用

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").mouseover(function(){
                $(this).css("color", "red");
            }).mouseout(function () {
                $(this).css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>

浏览器预览效果如图所示。

分析：

$("div").mouseover(function(){
    $(this).css("color", "red");
}).mouseout(function () {
    $(this).css("color", "black");
})

上面代码其实等价于：

$("div").mouseover(function(){
    $(this).css("color", "red");
})
$("div").mouseout(function () {
    $(this).css("color", "black");
})

在jQuery中，如果对同一个对象进行多种操作，则可以使用链式调用的语法。链式调用是jQuery中经典语法之一，不仅节省代码量，还可以提高代码的性能效率。

三、鼠标按下和鼠标松开

当用户按下鼠标时，会触发mousedown事件；当用户松开鼠标时，则会触发mouseup事件。

mousedown表示鼠标按下的一瞬间所触发的事件，而mouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，只有“先按下”才能“再松开”。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").mousedown(function(){
                $("h1").css("color", "red");
            })
            $("#btn").mouseup(function () {
                $("h1").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <h1>绿叶学习网</h1>
    <hr />
    <input id="btn" type="button" value="按钮" />
</body>
</html>

浏览器预览效果如图所示。

分析：

在实际开发中，mousedown、mouseup和mousemove经常用来配合实现拖拽、抛掷等效果，不过这些效果非常复杂，感兴趣的小伙伴可以看看本系列图书中的《从0到1：HTML5 Canvas动画开发》。