JavaScript 鼠标事件

在浏览网页时，我们最常用的交互工具就是鼠标。点击按钮、悬停链接、拖动元素等，这些操作都离不开鼠标。JavaScript 通过提供一系列鼠标事件，使得我们可以进行对应的响应操作。

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

JavaScript 鼠标事件
事件	说明	触发时机
click	鼠标单击	当完整地点击（按下并释放鼠标主按钮，通常是左键）元素时触发
dblclick	鼠标双击	当快速地双击（连续两次点击）元素时触发
mousedown	鼠标按下	当按下鼠标按钮（任意按钮）在元素上时触发
mouseup	鼠标松开	当释放鼠标按钮（任意按钮）在元素上时触发
mousemove	鼠标移动	当鼠标指针在元素上移动时触发
mouseover	鼠标移入（冒泡）	当鼠标指针移入 “元素或其子元素” 时触发
mouseout	鼠标移出（冒泡）	当鼠标指针移出 “元素或其子元素” 时触发
mouseenter	鼠标移入（不冒泡）	当鼠标指针移入元素时触发，不包括其子元素
mouseleave	鼠标移出（不冒泡）	当鼠标指针移出元素时触发，不包括其子元素

注意: click 是一个 “事件”，而 onclick 是一个 “事件属性”（即 click 事件对应的 DOM 属性）。

JavaScript 鼠标单击

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

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

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #btn {
            display: inline-block;
            padding: 5px 10px;
            text-align: center;
            border-radius: 3px;
            background-color: deepskyblue;
            color: white;
            cursor: pointer;
        }

        #btn:hover {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div id="btn">欢迎</div>
    <script>
        const oDiv = document.getElementById("btn");

        oDiv.addEventListener("click", function () {
            alert("欢迎来到绿叶网！");
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 为 div 元素添加单击事件

分析：

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

如果想要为一个元素添加鼠标单击事件，以下 2 种方式都是可行的。

// 方式 1（推荐）
oDiv.addEventListener("click", function() {
    alert("欢迎来到绿叶网！");
});

// 方式 2
oDiv.onclick = function() {
    alert("欢迎来到绿叶网！");
};

方式 1 是使用 addEventListener() 方法来添加事件，而方式 2 是使用 onclick 属性（这是一个 DOM 对象的属性）来添加事件。

在实际开发中，我们推荐使用方式 1，这是因为 addEventListener() 是现代 JavaScript 中推荐的事件绑定方式，它可以为一个元素添加多个事件处理函数，且不会覆盖之前的处理函数。

JavaScript 鼠标移入和鼠标移出

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

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

示例 2：mouseover 和 mouseout 事件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3 id="title">绿叶网</h3>
    <script>
        const oTitle = document.getElementById("title");

        oTitle.addEventListener("mouseover", function() {
            this.style.color = "red";
        });

        oTitle.addEventListener("mouseout", function() {
            this.style.color = "black";
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 鼠标移入和鼠标移出

分析：

可能小伙伴会问：“鼠标移入事件可以使用 mouseover 和 mouseenter，那么它们之间有什么区别呢？”

实际上，mouseover 和 mouseout 会在鼠标进入或离开 “子元素” 时触发（事件冒泡），而 mouseenter 和 mouseleave 不会在进入或离开 “子元素” 时触发（不冒泡）。

在实际开发中（比如做一个下拉菜单），为了避免鼠标经过子元素时反复触发事件导致闪烁，我们更推荐使用 mouseenter 和 mouseleave，而不是 mouseover 和 mouseout。

JavaScript 鼠标按下和鼠标松开

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

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

示例 3：mousedown 和 mouseup 事件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3 id="title">绿叶网</h3>
    <button id="btn" type="button">按钮</button>
    <script>
        const oTitle = document.getElementById("title");
        const oBtn = document.getElementById("btn");

        oBtn.addEventListener("mousedown", function() {
            oTitle.style.color = "red";
        });

        oBtn.addEventListener("mouseup", function() {
            oTitle.style.color = "black";
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 鼠标按下和鼠标松开

分析：

在实际开发中，mousedown、mouseup 和 mousemove 这几个事件经常用来配合实现拖拽、抛掷等效果，感兴趣的小伙伴可以自行了解一下。