- 搜索
日期：2025/04/01 00:13来源：未知 人气：53
双份美女，双份快乐！好久没更新了。
上次我们介绍了JavaScript HTML DOM 事件的几个常见类别。今天我们详细介绍下鼠标相关的事件。
我们一个一个来介绍吧
当用户在元素上按下鼠标按钮时，发生此事件。
我们在网页上测试一下，我们点击id='header'的
document.getElementById('header').onmousedown = function() { alert('鼠标按钮被按下！');};
当我们在上图标红的框内点击鼠标(不论左键右键还是中键)时，就会弹出了按下鼠标的提示。
当指针移动到元素上时，发生此事件。
我们还是以上面的位置进行测试吧，把鼠标移动到id='header'的
document.getElementById('header').onmouseenter = function() { alert('鼠标已到达战场！');};
测试结果没问题，鼠标移动到指定区域就会弹出提示。
当指针从元素上移出时，发生此事件。
还是用id='header'的
document.getElementById('header').onmouseleave= function() { alert('鼠标已离开战场！');};
我们看到会有两个提示，一个是移入提示，一个是移出提示。
当指针在元素上方移动时，发生此事件。
我们换一个元素节点试试这个功能，我们选择id='js_appmsg_account'的
document.getElementById('js_appmsg_account').onmouseout= function() { console.log('鼠标在该节点上移动！');};
我们在红框区域移动时，console界面就会不断输出 鼠标在该节点上移动的提示。
当用户将鼠标指针移出元素或其中的子元素时，发生此事件。
我们还是用id='js_appmsg_account'的
document.getElementById('js_appmsg_account').onmouseout= function() { console.log('鼠标移出该节点！');};
可以看到，打印出的提示 显示了在该节点上移动后又移出的过程。
当指针移动到元素或其中的子元素上时，发生此事件。
我们还是id='js_appmsg_account'的
document.getElementById('js_appmsg_account').onmouseover= function() { console.log('鼠标在该节点上！');};
看看右下角打印出的提示，我们可以看到鼠标移入到该节点，然后在该节点上移动后又移出该节点的一整个移动过程。
当用户在元素上释放鼠标按钮时，发生此事件。
我们还是用id='js_appmsg_account'的
document.getElementById('js_appmsg_account').onmouseup= function() { console.log('已松开鼠标按钮！');};
可以看到鼠标移动到该节点然后在该节点上移动，松开鼠标按钮后移出该节点的动作。
当用户单击元素时发生此事件。
还是用上面的id='js_appmsg_account'的
document.getElementById('js_appmsg_account').onclick= function() { console.log('皮一下很开心');};
可以发现 鼠标的 onclick事件是在onmouseup事件发生之后执行的。我们再添加个onmousedown事件测试下看看看效果，如下图，按下按钮的onmousedown的事件先执行然后是onmouseup事件，最后是onclick事件。
当用户右键单击某个元素以打开上下文菜单时，发生此事件。
document.getElementById('js_appmsg_account').oncontextmenu= function() { console.log('右键菜单');};
可以看到右键弹出菜单时 打印出了 右键菜单的提示。
当用户双击元素时发生此事件。
我们再试试双击按钮的功能。双击id='js_appmsg_account'的
document.getElementById('js_appmsg_account').ondblclick= function() { console.log('双击了该节点');};
嗯，答应了 双击了该节点的提示。
好了 ，今天我们就大概介绍了一下JavaScript HTML DOM 鼠标事件的几个常用操作。下次我们再讲avaScript HTML DOM 键盘事件的常用操作。
