带你了解JavaScript中的键盘、鼠标事件

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于鼠标事件以及键盘事件的相关问题，还包括了页面事件、焦点事件、表单事件，下面一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、web前端】

思考：HTML页面是按照什么样的顺序进行加载的？

答案：页面的加载是按照代码的编写顺序，从上到下依次执行的。

会出现的问题：若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误。

解决办法：页面事件可以改变JavaScript代码的执行时机。

load事件：用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用。

在Web开发中，焦点事件多用于表单验证功能，是最常用的事件之一。

例如，文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据等。

为了让大家更好的掌握焦点事件的使用方法，下面以验证用户名和密码是否为空进行演示。

代码实现

验证用户名和密码是否为空
用户名：
密　码：
<script>window.onload = function() {addBlur($("user")); // 检测id为user的元素失去焦点后，value值是否为空addBlur($("pass")); // 检测id为pass的元素失去焦点后，value值是否为空};function $(obj) { // 根据id获取指定元素return document.getElementById(obj);}function addBlur(obj) { // 为指定元素添加失去焦点事件obj.onblur = function() {isEmpty(this);};}function isEmpty(obj) { // 检测表单是否为空if (obj.value === "") {$("tips").style.display = "block";$("tips").innerHTML = "注意：输入内容不能为空! ";} else {$("tips").style.display = "none";}}</script>

鼠标事件是Web开发中最常用的一类事件。

例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。

在项目开发中还经常涉及一些常用的鼠标属性，用来获取当前鼠标的位置信息。

IE6—8浏览器中不兼容pageX和pageY属性。因此，项目开发时需要对IE6~8浏览器进行兼容处理。

鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度。

为了让大家更好的理解鼠标事件的使用，以圆形显示鼠标单击位置为例演示。

代码实现

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

【案例】鼠标拖曳特效

盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。

举个例子

代码实现思路：

① 编写HTML，设计弹框用于实现拖拽特效。

② 为拖拽条添加mousedown事件及其处理程序。

③ 处理鼠标移动事件，实现鼠标的拖拽的特效。

④ 处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。

代码实现

鼠标拖动
注册信息 (可以拖拽)【关闭】
<script>// 获取被拖动的盒子和拖动条var box = document.getElementById("box");var drop = document.getElementById("drop");drop.onmousedown = function(event) { // 鼠标在拖动条上 按下 可拖动盒子var event = event || window.event;// 获取鼠标按下时的位置var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;// 计算鼠标按下的位置 距 盒子的位置var spaceX = pageX - box.offsetLeft;var spaceY = pageY - box.offsetTop;document.onmousemove = function(event) { // 鼠标移动的时候 获取鼠标的位置 整个盒子跟着鼠标的位置走var event = event || window.event;// 获取移动后鼠标的位置var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;// 计算并设置盒子移动后的位置box.style.left = pageX - spaceX + "px";box.style.top = pageY - spaceY + "px";};};document.onmouseup = function() {// 释放鼠标按键时 取消盒子的移动document.onmousemove = null;};</script>

键盘事件是指用户在使用键盘时触发的事件。

例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。

下面以Enter键切换的使用进行演示。具体如例所示。

代码实现

按Enter键切换用户姓名：
电子邮箱：
手机号码：
个人描述：
<script>var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; ++i) {inputs[i].onkeydown = function(e) {// 获取事件对象的兼容处理var e = event || window.event;// 判断按下的是不是回车，如果是，让下一个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>

注意

keypress事件保存的按键值是ASCII码，

keydown和keyup事件保存的按键值是虚拟键码。

具体参考MDN等手册

表单事件指的是对Web表单操作时发生的事件。

例如，表单提交前对表单的验证，表单重置时的确认操作等。JavaScript提供了相关的表单事件。

下面以是否提交和重置表单数据为例进行演示。具体如例所示。

代码实现

表单事件用户名：
<script>// 获取表单和需要验证的元素对象var regist = document.getElementById("register");var user = document.getElementById("user");regist.onsubmit = function(event) { // 为表单添加submit事件// 获取事件对象、输出当前事件类型var event = event || window.event;console.log(event.type);// 判断表单元素内容是否为空，若为空，则返回false，否则返回truereturn user.value ? true : false;};regist.onreset = function (event) { // 为表单添加reset事件// 获取事件对象、输出当前事件类型var event = event || window.event;console.log(event.type);// 判断是否确认重置，按“确定”则返回true，按“取消”返回falsereturn confirm("请确认是否要重置信息，重置后表单填写的内容将全部清空");};</script>

动手实践

图片放大特效

分析如何实现图片放大特效：

① 准备两张相同的图片，小图和大图。

② 小图显示在商品的展示区域。

③ 大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。

代码实现思路：

① 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。

② 当鼠标在小图上移动时，显示鼠标的遮罩和大图。

③ 当鼠标移动时，让遮罩跟着在小图中进行移动。

④ 限定遮罩在小图中的可移动范围。

⑤ 根据遮罩在小图中的覆盖范围，按比例的显示大图。