页面中响应键盘和鼠标事件

页面元素中，可以通过一系列的事件响应键盘和鼠标操作，包括点击按钮、移动鼠标、禁用元素的上下文菜单和粘贴功能、通过event对象获取操作细节等。

响应键盘事件

元素中，响应键盘事件的顺序是onkeydown、onkeypress和onkeyup；同时，可以使用event对象获取键盘操作的细节，包括：

type属性，返回事件名称，不包含on。
code属性，键入的字符代码，如A键就是KeyA。
charCode属性，字符的ASCII码，如a为97、回车键为13。
key属性，键入的字符键，如a。
keyCode属性，键盘虚拟码，如a为97、回车键为13。
shiftKey属性，Shift键状态，按下时返回true，否则返回false。
ctrlKey属性，Ctrl键状态，按下时返回true，否则返回false。
altKey属性，Alt键状态，按下时返回true，否则返回false。

下面的代码演示了键盘事件响应的相关应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>
        <label>输入字符</label>
        <input id="inputBox" onkeypress="inputBox_click();" />
    </p>
    <p>
        <label>事件名称(type)</label>
        <input id="eventType" />
    </p>
    <p>
        <label>输入的字符ASCII码(charCode)</label>
        <input id="inputCharCode" />
    </p>
    <p>
        <label>输入的字符代码(code)</label>
        <input id="inputCode" />
    </p>
    <p>
        <label>输入的键(key)</label>
        <input id="inputKey" />
    </p>
    <p>
        <label>输入的键盘码(keyCode)</label>
        <input id="inputKeyCode" />
    </p>
    <p>
        <label>Shift键状态(shiftKey)</label>
        <input id="shiftState" />
    </p>
    <p>
        <label>Ctrl键状态(ctrlKey)</label>
        <input id="ctrlState" />
    </p>
    <p>
        <label>Alt键状态(altKey)</label>
        <input id="altState" />
    </p>
</body>
</html>
<script src="/js/ajax.js"></script>
<script>
    //
    function inputBox_click() {
        document.getElementById("eventType").value = event.type;
        document.getElementById("inputCode").value = event.code;
        document.getElementById("inputCharCode").value = event.charCode;
        document.getElementById("inputKey").value = event.key;
        document.getElementById("inputKeyCode").value = event.keyCode;
        document.getElementById("shiftState").value = event.shiftKey;
        document.getElementById("ctrlState").value = event.ctrlKey;
        document.getElementById("altState").value = event.altKey;
    }
</script>

下图显示为使用Shift+a输入大写字母A后的效果。

键盘onkeypress事件响应

可以在此页面输入字母、字符、小键盘按键，并配合功能键来观察各个属性返回的信息。

响应鼠标事件

鼠标相关的事件包括：

onmousedown，按下鼠标按键。
onmouseup，松开鼠标按键。
onmousewheel，转动鼠标滚轮。
onmousemove，移动鼠标。
onmouseover，鼠标进入元素。
onmouseout，鼠标移出元素。

event对象中，鼠标相关的数据可以使用如下属性获取：

clientX和clientY属性，鼠标的位置。
button属性，按下鼠标的哪个按键，包括0（左键）、1（中键或滚轮）、2（右键）。
wheelDelta属性，滚轮转动的刻度值，向上转换为正数，向下转动为负数。

下面的代码会创建一个显示鼠标事件信息的页面。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<div id="div1" onmousedown="divMouseDown();" onmouseup="divMouseUp();"
     onmousemove="divMouseMove();" onmouseover="divMouseOver();"
     onmouseout="divMouseOut();" onmousewheel="divMouseWheel();"
     style="width:500px;height:300px;border:1px solid black;"></div>
    <p>
        <label>事件类型(type)</label>
        <input id="mouseType" />
    </p>
    <p>
        <label>按键(button)</label>
        <input id="mouseButton" />
    </p>
    <p>
        <label>X坐标(clientX)</label>
        <input id="mouseClientX" />
    </p>
    <p>
        <label>Y坐标(clientY)</label>
        <input id="mouseClientY" />
    </p>
    <p>
        <label>滚轮刻度(wheelDelta)</label>
        <input id="mouseWheelDelta" />
    </p>
    <p>
        <label>Shift键状态(shiftKey)</label>
        <input id="shiftState" />
    </p>
</body>
</html>
<script src="/js/ajax.js"></script>
<script>
    //
    function clearData() {
        document.getElementById("mouseType").value = "";
        document.getElementById("mouseButton").value = "";
        document.getElementById("mouseClientX").value = "";
        document.getElementById("mouseClientY").value = "";
        document.getElementById("mouseWheelDelta").value = "";
        document.getElementById("shiftState").value = "";
    }
    //
    function divMouseDown() {
        clearData();
        document.getElementById("mouseType").value = event.type;
        document.getElementById("mouseButton").value = event.button;
        document.getElementById("mouseClientX").value = event.clientX;
        document.getElementById("mouseClientY").value = event.clientY;
        document.getElementById("shiftState").value = event.shiftKey;
    }
    //
    function divMouseUp() {
        clearData();
        document.getElementById("mouseType").value = event.type;
        document.getElementById("mouseButton").value = event.button;
        document.getElementById("mouseClientX").value = event.clientX;
        document.getElementById("mouseClientY").value = event.clientY;
        document.getElementById("shiftState").value = event.shiftKey;
    }
    //
    function divMouseMove() {
        clearData();
        document.getElementById("mouseType").value = event.type;
        document.getElementById("mouseClientX").value = event.clientX;
        document.getElementById("mouseClientY").value = event.clientY;
        document.getElementById("shiftState").value = event.shiftKey;
    }
    //
    function divMouseOver() {
        clearData();
        document.getElementById("mouseType").value = event.type;
    }
    //
    function divMouseOut() {
        clearData();
        document.getElementById("mouseType").value = event.type;
    }
    //
    function divMouseWheel() {
        clearData();
        document.getElementById("mouseType").value = event.type;
        document.getElementById("mouseWheelDelta").value = event.wheelDelta;
    }
    //
</script>

下图是点击鼠标左键后的显示信息。

响应鼠标事件

请注意，示例中只显示了Shift功能键的状态，但Ctrl和Alt键同样可以和鼠标组合使用，需要时直接使用ctrlKey和altKey属性判断状态即可。

禁用上下文菜单和粘贴功能

页面中，需要禁用元素的上下文菜单时，可以设置oncontextmenu事件返回false值，如oncontextmenu="return false;"。

页面中，需要禁用元素的粘贴功能时，可以设置onpaste事件返回false值，如onpaste="return false;"。