mouse.style.display = 'block'; mouse.style.left = targetX + 'px'; mouse.style.top = targetY + 'px';

上述第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键即可进行切换测试。