JS常用鼠标、键盘事件
2026-10-29 22:32:36
JS常用鼠标、键盘事件
一、常用鼠标事件
onclick
触发时机：鼠标点击左键时触发。
应用场景：常用于按钮点击、链接点击等交互场景。
onmouseover
触发时机：鼠标指针移动到元素上方时触发。
应用场景：用于实现鼠标悬停时显示提示信息、改变元素样式等。
onmouseout
触发时机：鼠标指针离开元素时触发。
应用场景：与onmouseover相反，用于实现鼠标离开时隐藏提示信息、恢复元素样式等。
onfocus 和 onblur
触发时机：onfocus在元素获得焦点时触发，onblur在元素失去焦点时触发。
应用场景：主要用于表单元素（如输入框、选择框等），在获得或失去焦点时执行特定操作，如验证输入内容。
onmousemove
触发时机：鼠标指针在元素上移动时持续触发。
应用场景：用于实现拖拽效果、鼠标追踪等。
onmouseup
触发时机：鼠标按钮释放时触发。
应用场景：与onmousedown结合使用，实现拖拽、点击等交互。
onmousedown
触发时机：鼠标按钮按下时触发。
应用场景：同上，与onmouseup结合使用。
contextmenu
触发时机：鼠标右键点击时触发，用于控制上下文菜单的显示。
应用场景：常用于禁止默认的右键菜单，自定义右键菜单功能。
selectstart
触发时机：用户开始选择文本时触发。
应用场景：用于禁止或允许用户选择文本内容。
鼠标事件对象属性
- e.clientX 和 e.clientY：返回鼠标相对于浏览器窗口可视区的X和Y坐标。
- e.pageX 和 e.pageY：返回鼠标相对于文档页面的X和Y坐标（IE9+支持）。
- e.screenX 和 e.screenY：返回鼠标相对于电脑屏幕的X和Y坐标。
二、常用键盘事件
keyup
触发时机：按键弹起时触发。
应用场景：用于检测用户何时释放了按键，常用于输入验证、快捷键功能等。
keydown
触发时机：按键按下时触发。
应用场景：能够识别功能键（如Ctrl、Shift、左右箭头等），常用于快捷键绑定、输入控制等。
keypress
触发时机：按键按下时触发，但不能识别功能键。
应用场景：主要用于处理字符输入，区分字母大小写。
键盘事件执行顺序
- keydown → keypress → keyup
注意：keypress在识别字符输入时更为常用，而keydown和keyup则更适用于快捷键和输入控制。
键盘事件对象属性
- keycode：返回按键的ASCII码值，用于判断用户按下了哪个键。
注意：keydown和keyup不区分大小写，而keypress区分字母大小写。
综上所述，JS中的鼠标和键盘事件为开发者提供了丰富的交互手段，通过合理利用这些事件，可以实现复杂的用户交互功能。
热门标签
