JavaScript HTML DOM 事件之鼠标事件

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

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

我们一个一个来介绍吧

• 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 键盘事件的常用操作。