鼠标事件和键盘事件的示例讲解

2026-03-04 15:04:28 网络作者：本站点击：

鼠标事件和键盘事件的示例讲解

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>鼠标键盘事件</title>
    <!--引入页面样式文件 -->
    <link rel="stylesheet" type="text/css" href="css/mr-style.css">
</head>
<body onkeydown='return keyEvent()' style="margin:0 auto;" id="mybody">
<div class='a'>
    <h1 style="text-align: center">鼠标键盘事件</h1>
    <div id="mr-event" onmousedown="mouseEvent()">
        <span style="text-align: left">试一试：</span><br/><br/>
        1.单击键盘上的“Ctrl”键盘，背景颜色变成<span style="color:#151570">蓝色</span>。<br/><br/>
        2.单击键盘上的“Alt”键盘，背景颜色变成<span style="color:darkred">红色</span>。<br/><br/>
        3.单击键盘上的“Shift”键盘，背景颜色变成<span style="color:orangered">粉红色</span>。<br/><br/>
        4.单击鼠标左键，弹出提示信息。<br/><br/>
        5.单击鼠标右键，弹出提示信息。<br/><br/>
    </div>
</div>
</body>
<script language="javascript">
    //鼠标事件
    function mouseEvent(){
        var b=event.button;        //获取鼠标对象
        if(b==2){                   //单击鼠标右键时
            alert("你按了右键！"); //弹出提示信息
        }
        else if(b==0){              //单击鼠标左键时
            alert("你按了左键！");  //弹出提示信息
        }
    }
    //键盘事件
    function keyEvent() {
        var c = document.getElementById('mr-event');//获取页面对象
        if (event.altKey) {                         //单击键盘<Alt>键时
            c.style.backgroundColor = 'red';        //背景颜色变化
            return false;
        }
        else if (event.ctrlKey) {                   //单击键盘<Ctrl>键时
            c.style.backgroundColor = 'blue';       //背景颜色变化
            return false;
        }
        else if (event.shiftKey) {                  //单击键盘<Shift>键时
            c.style.backgroundColor = 'pink' ;      //背景颜色变化
            return false;
        }
    }
</script>
</html>

看上面的代码，讲解一下其中的Javascript代码内容，逐行详细讲解。这里的event.button是个啥？是规定好的吗

当然可以！下面我会对你提供的 HTML 页面中的 JavaScript 代码部分进行逐行详细讲解，并重点说明 event.button 的含义和作用。

一、整体代码结构

页面中包含两个事件处理函数：

mouseEvent()：处理鼠标按下事件
keyEvent()：处理键盘按下事件

它们分别绑定到 div 的 onmousedown 和 body 的 onkeydown 事件上。

二、JavaScript 代码逐行讲解

//鼠标事件function mouseEvent(){

定义一个名为 mouseEvent 的函数，当鼠标在 div 元素上按下时触发。

    var b = event.button;        //获取鼠标对象

event 是事件对象，浏览器在事件触发时自动传入。
event.button 是一个数值属性，表示按下的是鼠标的哪个键。
它是标准化的属性，但不是所有浏览器都完全一致，但现代浏览器已基本统一。

event.button 的可能值：

0：左键
1：中键（滚轮）
2：右键

⚠️ 注意：在某些旧浏览器中，右键可能返回 2，左键返回 0 或 1，但现代浏览器中这个规则是稳定的。

    if (b == 2) {                   //单击鼠标右键时
        alert("你按了右键！"); //弹出提示信息
    }

如果 event.button 的值为 2，说明用户按下了鼠标右键，弹出提示框。

    else if (b == 0) {              //单击鼠标左键时
        alert("你按了左键！");  //弹出提示信息
    }

如果值为 0，说明用户按下了左键，弹出提示框。

函数结束。

//键盘事件function keyEvent() {

定义一个名为 keyEvent 的函数，当键盘按键被按下时触发。

    var c = document.getElementById('mr-event'); //获取页面对象

通过 id 获取 div 元素对象，后续修改它的样式。

    if (event.altKey) {                         //单击键盘<Alt>键时
        c.style.backgroundColor = 'red';        //背景颜色变化
        return false;
    }

event.altKey 是一个布尔值，表示是否按下了 Alt 键。
如果按下了 Alt 键，将背景色改为红色，并返回 false 阻止默认行为（比如浏览器菜单弹出）。

    else if (event.ctrlKey) {                   //单击键盘<Ctrl>键时
        c.style.backgroundColor = 'blue';       //背景颜色变化
        return false;
    }

event.ctrlKey 表示是否按下了 Ctrl 键。
如果按下了 Ctrl 键，背景色改为蓝色。

    else if (event.shiftKey) {                  //单击键盘<Shift>键时
        c.style.backgroundColor = 'pink';       //背景颜色变化
        return false;
    }

event.shiftKey 表示是否按下了 Shift 键。
如果按下了 Shift 键，背景色改为粉色。

三、`event.button` 是规定好的吗？

是的，event.button 是 DOM 事件标准中定义的属性，用于指示鼠标按下时是哪个键。

它在 W3C UI Events 规范中有明确规定：

值	含义
0	主键（通常是左键）
1	辅助键（通常是中键/滚轮）
2	次键（通常是右键）

注意：不要与 event.buttons（带 s）混淆，后者是用位掩码表示多个按键同时按下的状态。

四、总结

函数	事件	功能
`mouseEvent()`	`onmousedown`	根据按下的鼠标键弹出不同提示
`keyEvent()`	`onkeydown`	根据按下的修饰键（Ctrl/Alt/Shift）改变背景色

这段代码很好地展示了：

如何获取事件对象
如何判断鼠标按键
如何判断键盘修饰键
如何动态修改页面样式

标签：

鼠标事件和键盘事件的示例讲解

一、整体代码结构

二、JavaScript 代码逐行讲解

三、event.button 是规定好的吗？

四、总结

三、`event.button` 是规定好的吗？