JavaScript DOM——鼠标事件和键盘事件及案例

目录

一、鼠标事件

鼠标事件类型

鼠标事件位置属性

二、 鼠标事件案例

图片跟随鼠标移动

案例需求

案例分析

实现效果

实现代码

鼠标移动显示当前坐标

案例需求

案例分析

实现效果

实现代码

三、键盘事件

常用的键盘事件

键盘事件对象

四、键盘事件案例

检测用户是否按下a键

案例需求

案例分析

实现效果

实现代码


一、鼠标事件

鼠标事件类型

①onclick:单击鼠标左键时触发

②onfocus:获得鼠标指针焦点触发

③onblur:失去鼠标指针焦点触发

④onmouseover:鼠标指针经过时触发

⑤onmouseout:鼠标指针离开时触发

⑥onmousedown:当按下任意鼠标按键时触发

⑦onmouseup:当释放任意鼠标按键时触发

⑧onmousemove:在元素内当鼠标指针移动时持续触发

鼠标事件位置属性

之前我们在JavaScript三大家族中介绍了offset家族和client家族,我们在鼠标事件中,有六个鼠标事件位置属性:

①clientX:鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标)

②clientY:鼠标指针位于浏览器页面当前窗口可视区的水平坐标(Y轴坐标)

③pageX:鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容

④pageY:鼠标指针位于文档的水平坐标(Y轴坐标),IE 6~IE 8不兼容

⑤screenX:鼠标指针位于屏幕的水平坐标(X轴坐标)

⑥screenY:鼠标指针位于屏幕的水平坐标(X轴坐标)

二、 鼠标事件案例

图片跟随鼠标移动

案例需求

实现图片跟随鼠标移动的效果

案例分析

利用mousemove事件,将图片设置为绝对定位,根据鼠标移动的坐标来改变它的left值和top值,从而达到图片跟随鼠标移动的效果。

实现效果

JavaScript DOM——鼠标事件和键盘事件及案例_第1张图片 

实现代码





    

    

鼠标移动显示当前坐标

案例需求

实现鼠标移动时显示鼠标指针当前坐标的效果

案例分析

与上一个案例相似,利用mousemove事件,将我们的坐标文本设置为绝对定位,根据鼠标移动的坐标来改变它的left值和top值,从而达到鼠标移动显示当前坐标的效果。

实现效果

JavaScript DOM——鼠标事件和键盘事件及案例_第2张图片

实现代码





    

    

三、键盘事件

常用的键盘事件

①keypress:某个键盘按键被按下时触发,不识别功能键,如Ctrl、Shift、箭头等。

②keydown:某个键盘按键被按下时触发。

③keyup:某个键盘按键被松开时触发。

区别:

  • keypress事件保存的按键值是ASCII码,而keydown和keyup事件保存的按键值是虚拟键码;
  • keypress事件区分字母大小写,而keydown和keyup事件不区分字母大小写。
  • keydown和keypress如果按住不放的话,会重复触发该对应事件。

键盘事件对象

KeyBoardEvent就是键盘事件对象,它是跟键盘事件相关的一系列信息的集合,根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值,进而可以判断用户按下了哪个键。

四、键盘事件案例

检测用户是否按下a

案例需求

检测用户是否按下a键,如果按下a键,就把光标定位到搜索框里面。

案例分析

先找到a的ASCII码值65,利用keyup事件,如果事件对象的keyCode值是65,则将光标定位到搜索框。

实现效果

JavaScript DOM——鼠标事件和键盘事件及案例_第3张图片

实现代码



    

    

你可能感兴趣的:(JavaScript,javascript,前端)