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值，从而达到图片跟随鼠标移动的效果。

实现效果

 

实现代码

鼠标移动显示当前坐标

案例需求

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

案例分析

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

实现效果

实现代码

三、键盘事件

常用的键盘事件

①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，则将光标定位到搜索框。

实现效果

实现代码