javascript中有哪些鼠标事件

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本篇内容介绍了“javascript中有哪些鼠标事件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

鼠标事件有：1、click（单击）事件；2、dblclick（双击）事件；3、mousedown事件；4、mouseup事件；5、mouseout事件；6、mouseover事件；7、mousemove事件；8、mouseleave事件等。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

在 JavaScript 中，鼠标事件是 Web 开发中最常用的事件类型。

鼠标事件类型详细说明如下表所示：

鼠标事件类型
事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	鼠标按钮被按下时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	鼠标按键被松开时发生
mousemove	鼠标在某个元素上时持续发生
mouseleave	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发。
contextmenu	在用户点击鼠标右键打开上下文菜单时触发

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS常用鼠标事件</title>
    <style>
        li{font-size: 18px;line-height: 35px;}
        li:hover{cursor:pointer;}
    </style>
</head>
<body>
    <ol>
        <li>单击我变色！</li>
        <li>双击有惊喜！</li>
        <li>鼠标滑过字体变大，鼠标离开字体变小！</li>
        <li>鼠标按下文字为红色，鼠标抬起文字为绿色，鼠标移动打印“鼠标在 li 中移动了...”！</li>
    </ol>
 
    <script>
        // 获取 li 标签
        var oLis = document.getElementsByTagName("li");
        
        oLis[0].onclick = function () {
            this.style.backgroundColor = 'red';
        }
        
        
        oLis[1].ondblclick = function () {
            this.style.color = 'red';
        }
        
        
        oLis[2].onmouseover = function () {
            this.style.fontSize = 22 + 'px';
        }
        
        oLis[2].onmouseout = function () {
            this.style.fontSize = 18 + 'px';
        }
        
        
        oLis[3].onmousedown = function () {
            this.style.color = 'red';
        }
        
        oLis[3].onmouseup = function () {
            this.style.color = 'blue';
        }
        
        oLis[3].onmousemove = function () {
            console.log('鼠标在 li 中移动了...');
        }
    </script>
</body>
</html>

javascript中有哪些鼠标事件