JavaScript | 鼠标事件&键盘事件

一、鼠标事件

鼠标事件是web开发中最常用的一类事件。例如，鼠标滑过时，切换Tab栏显示的内容;利用鼠标拖曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。下面列举几个常用的鼠标事件，如下表

事件名称	事件触发时机
click	单击事件（当按下并释放任意鼠标时触发）
dblclick	双击事件（当鼠标双击时触发）
mousedown	按下鼠标键时触发
mouseup	释放按下的鼠标键时触发
mousemove	鼠标移动事件
mouseover	移入事件
mouseout	移出事件
change	当内容发生改变时触发，一般都用于<select>对象

上表所示的鼠标事件，在项目开发中还经常涉及一些常用的鼠标属性，用来获取当前鼠标的位置信息。常用属性如下表。

位置属性(只读)	描述
clientX	鼠标指针位于浏览器页面当前窗口可视区的水平坐标(x轴坐标)
clientY	鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标)
pageX	鼠标指针位于文档的水平坐标(X轴坐标)，IE6~8不兼容
pageY	鼠标指针位于文档的垂直坐标(Y轴坐标)，IE6~8不兼容
screenX	鼠标指针位于屏幕的水平坐标(x轴坐标)
screenY	鼠标指针位于屏幕的垂直坐标(Y轴坐标)

 

为了让大家更好地理解鼠标事件的使用，下面写一个小demo进行演示

<div id="mouse"></div>
<script> 
var mouse = document.getElementById('mouse');
//需求:鼠标在页面上单击时，获取单击时的位置，并显示一个小圆点 
document.onclick = function(event) {
//获取事件对象的兼容处理
var event = event ll window.event;
// 鼠标在页面上的位置 
var pageX = event.pageX 1 event.clientX+ document.documentElement.scrollLeft 
var pageY = event.pageY| event.clientY + document.documentElement.scrollTop 
//计算<div>应该显示的位置 
var targetX = pageX - mouse.offsetwidth / 2; 
var targetY = pageY - mouse.offsetHeight / 2;
//在鼠标单击的位置显示<div> 
mouse.style.display = 'block'; 
mouse.style.left = targetX + 'px'; 
mouse.style.top = targetY + 'px'; 
}; 
</script>

　　上述第1行设置的<div>元素，表示当前鼠标单击页面的位置，默认情况下隐藏。第3行用于获取鼠标位置的元素对象。第5~18行代码为 document 文档添加单击事件，并对其进行处理。其中，第7~10行代码用于获取事件对象以及鼠标在页面中的位置，第 12~13 行计算<div>的显示位置，让鼠标显示到<div>的中心上，第 15~17行代码用于显示并设置<div>。单击页面，即可出现效果。

二、键盘事件

键盘事件是指用户使用键盘时触发的事件。例如，用户Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。下面列举几个常用的键盘事件

事件名称	事件触发时机
keydown	在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
keypress	按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）
keyup	释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

需要注意的是，keypress事件保存的按键 值是ASCII码，keydown和keyup 事件保存的按键值是虚拟键码。读者可参考 MDN 等手册进行 查看，此处不再详细列举。为了让大家更好地理解键盘事件的使用，下面以Enter键切换的使用进行演示。

（1）编写HTML页面

<p>用户姓名:<input type="text"></p>
<p>电子邮箱:<input type="text"></p>
<p>手机号码:<input type="text"></p>
<p>个人描述:<input type="text"></p>

（2）按Enter键切换的效果

<script>
var inputs =document.getElementsByTagName('input');
for (var i =0; i<inputs.length; ++i) { inputs[i].onkeydown = function(e){
//获取事件对象的兼容处理
 var e=event ll window.event; 
//判断按下的是不是Enter键，如果是，让下一个input获取焦点
if (e.keyCode===13) { 
//遍历所有input框，找到当前input的下标 for (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === this) { 
//计算下一个input元素的下标 
var index = i + 1 >= inputs.length?0 :i+1; 
break; 
} 
}
// 如果下一个input还是文本框，则获取键盘焦点 
if (inputs[index].type === 'text') { 
inputs[index].focus(); // 触发 focus 事件 
}
}；
}
</script>

　　上述第2行用于获取所有的input元素对象，第3~23行通过遍历为每个input元素添加 keydown 事件，当发生事件时，判断当前键盘事件的ke eyCode属性值是否全等于13若是则表示用户的按键为Enter(回车)，让下一个input元素获了取键盘焦点。否则不进行任何操作。
　　其中,第10~16行代码通过遍历所有input元素获取发生键盘事件的input元素对象的下标，计算下一个input元素的下标。第18~20行代码表示 下一个input框是文本框时，为其获取键盘焦点。完成后按 Enter键即可进行切换测试。