javascript 键盘事件,javascript鼠标点击事件
本文为您带来了一些关于javascript的知识，包括鼠标事件和键盘事件、页面事件、焦点事件和表单事件。下面就让我们一起来看看，希望能有所帮助。
【相关推荐：javascript视频教程，web前端】
思考：HTML页面是按照什么样的顺序进行加载的？
答：页面的加载是按照代码编写顺序从上到下进行的。
会出现的问题:如果在页面加载前使用JavaScript操作DOM元素，会出现语法错误。
解决办法:页面事件可以改变JavaScript代码的执行时间。
Load event:用于在body中所有标签加载完毕后触发，由于不需要考虑页面加载顺序，所以在开发具体功能时经常添加。Unload事件：用于在页面关闭时触发，通常用于清除引用以避免内存泄漏。
在Web开发中，焦点事件是最常用的事件之一，主要用于表单验证。
例如，当文本框获得焦点时更改文本框的样式，当文本框失去焦点时验证文本框中输入的数据等。
为了让大家更好的知道如何使用焦点事件，下面是验证用户名和密码是否为空的演示。
代码实现
！声明文档类型
头
meta charset=UTF-8
验证用户名和密码是否为空/标题
风格
正文{背景：# ddd}。box { background:# fff；填充：20px 30px宽度：400px边距：0自动；文本对齐：居中；}。btn {宽度：180px高度：40px背景：# 3388ff边框：1px solid # fff颜色：# fff字体大小：14px}。ipt {宽度：260px填充：4px 2px}。tips {宽度：440px高度：30px保证金：5px自动；背景：# fff颜色：红色；边框：1px纯色# ccc显示：无；行高：30px左填充：20px字体大小：13px}
/风格
/头
身体
p id=tips class=tips/p
p class=box
Plabel用户名：input id= user class= ipt type= text /label/p
Plabel密码：input id= pass class= ipt type= password /label/p
p button id= log in class= BTN 登录/button/p
/p
脚本
window.onload=function() {
add blur($( user ))；//检测id为user的元素失去焦点后value值是否为空
add blur($( pass ))；//在id为pass的元素失去焦点后，检查value值是否为空。
};
Function $(obj) {//根据id获取指定的元素
返回document . getelementbyid(obj)；
}
Add function blur(obj){//为指定元素添加失焦事件。
obj.onblur=function() {
isEmpty(这个)；
};
}
函数isEmpty(obj){///检查表单是否为空。
if (obj.value===) {
$( tips ). style . display= block ；
$(tips )。innerHTML=注意：输入不能为空！；
}否则{
$( tips ). style . display= none ；
}
}
/脚本
/body
/html鼠标事件是Web开发中最常用的事件。
比如鼠标滚动时，切换标签栏显示的内容；用鼠标拖动状态框，调整其显示位置等。这些常见的网页效果都将使用鼠标事件。
在项目开发中，经常会涉及到一些常用的鼠标属性，用来获取当前鼠标的位置信息。
6-8 pageX和pageY属性在浏览器中不兼容。因此，在项目开发过程中，需要兼容IE6~8浏览器。
鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条滚动的文本长度。
为了让大家更好的理解鼠标事件的使用，以鼠标点击位置的圆形显示为例进行演示。
代码实现
！声明文档类型
头
meta charset=UTF-8
显示鼠标点击位置/标题
风格。鼠标{位置：绝对；背景：# ffd965宽度：40px高度：40px边框半径：20px}
/风格
/头
身体
p id=mouse class=mouse/p
脚本
var mouse=document . getelementbyid( mouse )；
//要求：鼠标点击页面时，获取点击时的位置并显示一个小圆点。
document . onclick=function(event){
//获取事件对象的兼容处理
var event=event window.event
//鼠标在页面上的位置
var pageX=event . pageX event . clientx document . document element . scroll left；
var pakey=事件。pakey 事件。客户文件。文档元素。滚动顶部；
//计算p应该显示的位置
var targetX=pageX-mouse。offsetwidth/2；
var targetY=pageY-mouse。偏移高度/2；
//在鼠标单击的位置显示p
老鼠。风格。display= block
老鼠。风格。left=targetX px
老鼠。风格。top=targetY px
};
/脚本
/body
/html【案例】鼠标拖曳特效
盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。
举个例子
代码实现思路:
编写HTML，设计弹框用于实现拖拽特效。
为拖拽条添加鼠标按下事件及其处理程序。
处理鼠标移动事件，实现鼠标的拖拽的特效。
处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。
代码实现
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题鼠标拖动/标题
风格
正文{毛利：0}。box {宽度：400 px高度：300像素边框：5px纯色# eee box-shadow:2px 2px 2px 2px # 666；位置：绝对；top:30%；左：30%}。高清{宽度：100%;高度：25px背景色：# 7c9299边框-底部：1px固体# 369行高：25px颜色：# fff光标：移动}
# box _ close { float:right；光标：指针}
/风格
/头
身体
p id=box class=box
p id=drop class=hd
注册信息（可以拖拽)
span id=box_close 【关闭】/span
/p
p class=bd/p
/p
脚本
//获取被拖动的盒子和拖动条
var box=文档。getelementbyid( box )；
var drop=文档。getelementbyid( drop )；
放下。onmousedown=function(event){//鼠标在拖动条上按下可拖动盒子
var event=event window.event
//获取鼠标按下时的位置
var pageX=事件。pageX 事件。clientx文档。文档元素。向左滚动；
var pakey=事件。pakey 事件。客户文件。文档元素。滚动顶部；
//计算鼠标按下的位置距盒子的位置
var spaceX=pageX-box。向左偏移；
var spaceY=pakey-box。offsettop
文档。onmousemove=function(event){//鼠标移动的时候获取鼠标的位置整个盒子跟着鼠标的位置走
var event=event window.event
//获取移动后鼠标的位置
var pageX=事件。pageX 事件。clientx文档。文档元素。向左滚动；
var pakey=事件。pakey 事件。客户文件。文档元素。滚动顶部；
//计算并设置盒子移动后的位置
盒子。风格。left=pageX-spaceX px ；
盒子。风格。top=pageY-spaceY px ；
};
};
文档。onmouseup=function(){//释放鼠标按键时取消盒子的移动
document.onmousemove=null
};
/脚本
/body
/html键盘事件是指用户在使用键盘时触发的事件。
例如，用户按转义字符键关闭打开的状态栏，按进入键直接完成光标的上下切换等。
下面以进入键切换的使用进行演示。具体如例所示。
代码实现
！声明文档类型
头
meta charset=UTF-8
标题按进入键切换/标题
/头
身体
p用户姓名：输入类型=text/p
p电子邮箱：输入类型=text/p
p手机号码：输入类型=text/p
p个人描述：输入类型=text/p
脚本
var输入=文档。getelementsbytagname(“input”)；
for(var I=0；输入长度；i) {
投入[我].onkeydown=函数(e) {
//获取事件对象的兼容处理
var e=event window.event
//判断按下的是不是回车，如果是，让下一个投入获取焦点
if (e.keyCode===13) {
//遍历所有投入框，找到当前投入的下标
for(var I=0；输入长度；i) {
if (inputs[i]===this) {
//计算下一个投入元素的下标
var index=i 1=inputs.length？0:I 1；
打破；
}
}
//如果下一个投入还是文本框，则获取键盘焦点
如果（输入[索引]。type===text) {
输入[索引]。焦点();//触发集中事件
}
}
};
}
/脚本
/body
/html注意
按键事件保存的按键值是美国信息交换标准代码码，
按键和击键事件保存的按键值是虚拟键码。
具体参考移动用户号码簿号码等手册
表单事件指的是对网表单操作时发生的事件。
例如，表单提交前对表单的验证，表单重置时的确认操作等JavaScript .提供了相关的表单事件。
下面以是否提交和重置表单数据为例进行演示。具体如例所示。
代码实现
！声明文档类型
头
meta charset=UTF-8
标题事件/标题
/头
身体
表单id=register
用户名：输入id=用户类型=文本/标签
输入类型=提交值=提交
类型=重置值=重置
/表单
脚本
//获取需要验证的表单和元素对象
var regist=document . getelementbyid( register )；
var user=document . getelementbyid( user )；
regist . on submit=function(event){//为表单添加提交事件
//获取事件对象，输出当前事件类型。
var event=event window.event
console . log(event . type)；
//判断表单元素的内容是否为空，如果是，返回false，否则返回true。
返回user.value？真：假；
};
regist . on reset=function(event){//为窗体添加重置事件
//获取事件对象，输出当前事件类型。
var event=event window.event
console . log(event . type)；
//确定是否确认复位，按确定返回真，按取消返回假。
Return confirm(请确认是否要重置信息，之后表格中填写的内容将全部清空)；
};
/脚本
/body
/html动手实践
图片放大效果
分析如何实现图片放大的特效；
准备两张一模一样的图片，一张小的，一张大的。
小图陈列在商品展区。
大图用于鼠标在小图上移动时，按比例显示大图中相应的区域。
代码实现思路:
写HTML页面显示小图，蒙版隐藏鼠标和大图。
当鼠标移动到小图像上时，会显示鼠标的遮罩和大图像。
当鼠标移动时，让蒙版在缩略图中移动。
限制蒙版在缩略图中的移动范围。
根据小图中蒙版的覆盖范围，按比例显示大图。
【相关推荐：javascript视频教程，web前端】以上是给大家展示JavaScript中键盘鼠标事件的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。