双份美女，双份快乐！好久没更新了。

上次我们介绍了JavaScript HTML DOM 事件的几个常见类别。今天我们详细介绍下鼠标相关的事件。

事件

描述

属于

on

mousedown

当用户在元素上按下鼠标按钮时，发生此事件。

MouseEvent

on

mouseenter

当指针移动到元素上时，发生此事件。

MouseEvent

on

mouseleave

当指针从元素上移出时，发生此事件。

MouseEvent

on

mousemove

当指针在元素上方移动时，发生此事件。

MouseEvent

on

mouseout

当用户将鼠标指针移出元素或其中的子元素时，发生此事件。

MouseEvent

on

mouseover

当指针移动到元素或其中的子元素上时，发生此事件。

MouseEvent

on

mouseup

当用户在元素上释放鼠标按钮时，发生此事件。

MouseEvent

on

click

当用户单击元素时发生此事件。

MouseEvent

on

contextmenu

当用户右键单击某个元素以打开上下文菜单时，发生此事件。

MouseEvent

on

dblclick

当用户双击元素时发生此事件。

MouseEvent

我们一个一个来介绍吧

onmousedown鼠标事件

当用户在元素上按下鼠标按钮时，发生此事件。

我们在网页上测试一下，我们点击id='header'的<div>节点试试看，让弹出按下鼠标的提示。代码如下

document.getElementById('header').onmousedown = function() {    alert('鼠标按钮被按下！');};

当我们在上图标红的框内点击鼠标(不论左键右键还是中键)时，就会弹出了按下鼠标的提示。

onmouseenter鼠标事件

当指针移动到元素上时，发生此事件。

我们还是以上面的位置进行测试吧，把鼠标移动到id='header'的<div>节点上，让弹出鼠标已到达战场。

document.getElementById('header').onmouseenter = function() {    alert('鼠标已到达战场！');};

测试结果没问题，鼠标移动到指定区域就会弹出提示。

onmouseleave鼠标事件

当指针从元素上移出时，发生此事件。

还是用id='header'的<div>节点来测试，当鼠标从节点移出时，弹出鼠标已离开战场的提示。

document.getElementById('header').onmouseleave= function() {    alert('鼠标已离开战场！');};

我们看到会有两个提示，一个是移入提示，一个是移出提示。

onmousemove鼠标事件

当指针在元素上方移动时，发生此事件。

我们换一个元素节点试试这个功能，我们选择id='js_appmsg_account'的<div>节点试试，在该节点上移动时，输出 在该节点上移动。我们看看效果

document.getElementById('js_appmsg_account').onmouseout= function() {    console.log('鼠标在该节点上移动！');};

我们在红框区域移动时，console界面就会不断输出 鼠标在该节点上移动的提示。

onmouseout鼠标事件

当用户将鼠标指针移出元素或其中的子元素时，发生此事件。

我们还是用id='js_appmsg_account'的<div>节点测试，移出时打印出移出该节点。

document.getElementById('js_appmsg_account').onmouseout= function() {    console.log('鼠标移出该节点！');};

可以看到，打印出的提示 显示了在该节点上移动后又移出的过程。

onmouseover鼠标事件

当指针移动到元素或其中的子元素上时，发生此事件。

我们还是id='js_appmsg_account'的<div>节点，当鼠标在这个节点上时，输出 鼠标在该节点上。我们看看效果。

document.getElementById('js_appmsg_account').onmouseover= function() {    console.log('鼠标在该节点上！');};

看看右下角打印出的提示，我们可以看到鼠标移入到该节点，然后在该节点上移动后又移出该节点的一整个移动过程。

onmouseup鼠标事件

当用户在元素上释放鼠标按钮时，发生此事件。

我们还是用id='js_appmsg_account'的<div>节点，我们没有设置在该节点按鼠标的操作，只设置释放鼠标按钮时，打印出 已松开鼠标按钮 的提示

document.getElementById('js_appmsg_account').onmouseup= function() {    console.log('已松开鼠标按钮！');};

可以看到鼠标移动到该节点然后在该节点上移动，松开鼠标按钮后移出该节点的动作。

onclick鼠标事件

当用户单击元素时发生此事件。

还是用上面的id='js_appmsg_account'的<div>节点，点击该节点 打印出 皮一下很开心

document.getElementById('js_appmsg_account').onclick= function() {    console.log('皮一下很开心');};

可以发现 鼠标的 onclick事件是在onmouseup事件发生之后执行的。我们再添加个onmousedown事件测试下看看看效果，如下图，按下按钮的onmousedown的事件先执行然后是onmouseup事件，最后是onclick事件。

oncontextmenu鼠标事件

当用户右键单击某个元素以打开上下文菜单时，发生此事件。

document.getElementById('js_appmsg_account').oncontextmenu= function() {    console.log('右键菜单');};

可以看到右键弹出菜单时 打印出了 右键菜单的提示。

ondblclick鼠标事件

当用户双击元素时发生此事件。

我们再试试双击按钮的功能。双击id='js_appmsg_account'的<div>节点时 打印出 双击了该节点 的提示。

document.getElementById('js_appmsg_account').ondblclick= function() {    console.log('双击了该节点');};

嗯，答应了 双击了该节点的提示。

好了 ，今天我们就大概介绍了一下JavaScript HTML DOM 鼠标事件的几个常用操作。下次我们再讲avaScript HTML DOM 键盘事件的常用操作。