从这一节开始，我们正式开始实操JavaScript中的各种事件。事件操作是JavaScript核心之一，也是本书的重中之重，因为JavaScript本身就是一门基于事件的编程语言。

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

鼠标事件
事件 说明
onclick 鼠标单击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
onmousemove 鼠标移动事件

鼠标事件非常多，这里我们只列出最实用的，免得增加大家的记忆负担。从上表可以看出，事件名都是以“on”开头的。其实这些事件名，从英文角度来看就很好记忆的。

一、鼠标单击

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

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

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #btn 
        {
            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;
        }
        #btn:hover {background-color: dodgerblue;}
    </style>
    <script>
        window.onload = function () 
        {
            var oDiv = document.getElementById("btn");
            oDiv.onclick = function () 
            {
                alert("玩我么？");
            };
        };
    </script>
</head>
<body>
    <div id="btn">调试代码</div>
</body>
</html>

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

分析：

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

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

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = alertMes;
            function alertMes() {
                alert("欢迎来到绿叶学习网！");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮"/>
</body>
</html>

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

分析：

oBtn.onclick = alertMes;
function alertMes() 
{
    alert("欢迎来到绿叶学习网！");
};

上面这种代码其实可以等价于：

oBtn.onclick = function () 
{
    alert("欢迎来到绿叶学习网！");
};

这两种写法都是等价的，小伙伴们要了解一下。

二、鼠标移入和鼠标移出

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

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

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oP = document.getElementById("content");
            oP.onmouseover = function () 
            {
                this.style.color = "red";
            };
            oP.onmouseout = function () 
            {
                this.style.color = "black";
            };
        };
    </script>
</head>
<body>
    <p id="content">绿叶学习网</p>
</body>
</html>

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

分析：

这里的this指向的是oP，也就是说

this.style.color = "red";

其实等价于：

oP.style.color = "red";

this的使用非常复杂，这里我们只是给初学者先简单介绍，下一章再详细讲解。

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

三、鼠标按下和鼠标松开

当用户按下鼠标时，会触发onmousedown事件。当用户松开鼠标时，则会触发onmouseup事件。

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

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTitle = document.getElementById("title");
            var oBtn = document.getElementById("btn");
            oBtn.onmousedown = function () 
            {
                oTitle.style.color = "red";
            };
            oBtn.onmouseup = function () 
            {
                oTitle.style.color = "black";
            };
        };
    </script>
</head>
<body>
    <h1 id="title">绿叶学习网</h1>
    <hr />
    <input id="btn" type="button" value="button" />
</body>
</html>

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

分析：

在实际开发中，onmousedown、onmouseup和onmousemove经常配合实现拖拽、抛掷等效果，不过这些效果非常复杂，我们在JavaScript进阶中再详细介绍。