JavaScript鼠标和键盘事件
- JavaScript
- 2024-08-21
- 615热度
- 0评论
鼠标和键盘是用户与程序的主要交互设备，DOM对象定义了鼠标和键盘事件，当用户在DOM对象区域内进行鼠标操作或按下键盘操作时，DOM对象会触发鼠标和键盘事件。
鼠标事件
常用鼠标事件如下表所示：
| 事件类型 | 描述 | 备注 |
| onclick | 当用户使用鼠标单击DOM对象时触发该事件 | （1） |
| ondblclick | 当用户使用鼠标双击DOM对象时触发该事件 | |
| onmousemove | 当鼠标在DOM对象区域移动时触发该事件 | （2） |
| onmouseenter | 当鼠标进入DOM对象区域时触发该事件 | （3） |
| onmouseleave | 当鼠标离开DOM对象区域时触发该事件 | （3） |
| onmouseover | 当鼠标进入DOM对象及子对象区域时触发该事件 | （4） |
| onmouseout | 当鼠标离开DOM对象及子对象区域时触发该事件 | （4） |
| onmousedown | 当用户按下鼠标按钮时触发该事件 | （7） |
备注（1）
onclick事件在用户用鼠标单击DOM对象时触发，事件绑定JS处理函数参见“JS如何监听事件”一节。
备注（2）
onmousemove事件在鼠标移动时触发该事件，若要监听浏览器窗口鼠标移动事件需要使用Window对象监听，其它对象限制于在对象区域内监听。
onmousemove事件处理函数会传入DOM Event对象，该对象表示事件的状态，例如触发事件的对象、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
在onmousemove事件处理函数中，可以利用Event对象获取鼠标在窗口的位置。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onmousemove = function(event) {
var location = "x:" + event.clientX + " y:" + event.clientY
document.getElementById("id_location").value = location;
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p>鼠标位置：<input type="text" id="id_location" value=""/></p>
</boyd>
<html>
案例代码onmousemove事件处理函数传入的参数event就是Event对象，该对象两个属性clientX和clientY，分别表示鼠标在窗口的x位置和y位置。
备注（3）
onmouseenter事件和onmouseleave是相对事件，当鼠标进入DOM对象区域内时触发onmouseenter事件，当鼠标离开DOM对象区域内时触发onmouseleave事件。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function fun_enter() {
alert("鼠标进入");
}
function fun_leave() {
alert("鼠标离开");
}
</script>
<style>
.testdiv{
border: 1px solid #000000;
width: 300px;
height: 100px;
overflow: scroll;
margin-top:100px;
}
</style>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div class="testdiv" onmouseenter="fun_enter()" onmouseleave="fun_leave()">
不以物喜，不以己悲。居庙堂之高则忧其民，处江湖之远则忧其君。
是进亦忧，退亦忧。然则何时而乐耶？
其必曰：先天下之忧而忧，后天下之乐而乐欤！
</div>
</boyd>
<html>
备注（4）
onmouseover和onmouseout事件类似于onmouseenter事件和onmouseleave事件。
两对事件的相同点是鼠标经过对象自身都会触发事件。
不同点：
onmouseenter和onmouseleave事件：鼠标经过自身触发事件，经过其子元素时不触发该事件。
onmouseover和onmouseout事件：鼠标经过自身触发事件，经过其子元素时也触发该事件。
备注（5）
onmousedown事件在用户按下鼠标键时被触发，若在事件处理函数中需要判断按下鼠标哪个键，需要在处理函数中传入Event对象。
Event对象的button属性表示按键状态，值为0表示左键被按下，值为1表示中间键被按下，值为2表示右键被按下。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onmousedown = function(event) {
var location
// 按下鼠标左键
if(event.button==0)
location = "按下左键"
// 按下鼠标中间键
else if(event.button==1)
location = "按下中间键"
// 按下鼠标右键
else if(event.button==2)
location = "按下右键"
document.getElementById("id_location").value = location;
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p>鼠标按键：<input type="text" id="id_location" value=""/></p>
</boyd>
<html>
键盘事件
常用键盘事件如下表所示：
| 事件类型 | 描述 | 备注 |
| onkeydown | 当用户按下键盘的某个按键时触发该事件 | （1） |
| onkeyup | 当按下的按键被松开时触发该事件 |
备注（1）
onkeydown事件在用户按下键盘的某个按键时被触发，若在事件处理函数中需要判断按下键盘的哪个键，需要在处理函数中传入Event对象。
Event对象的keyCode属性表示键盘的ASCII编码，通过键盘的ASCII编码可以识别那个键被按下。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onkeydown = function(event) {
var key = event.keyCode
document.getElementById("id_location").value = key;
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p>按键ASCII码：<input type="text" id="id_location" value=""/></p>
</boyd>
<html>
