本文共 1960 字，大约阅读时间需要 6 分钟。

JS事件汇总整理

1. 键盘事件

键盘事件是跟踪用户键盘输入的重要工具，常见的键盘事件有以下几个：

常用键盘事件

• onkeyup：某个键盘按键被松开时触发
• onkeydown：某个键盘按键按下时触发
• onkeypress：某个键盘按键按下时触发，但不识别功能键（如Ctrl、Shift、箭头键等）

键盘事件对象

键盘事件对象提供了一些有用的属性：

• keyCode：返回按下键的ASCII码值
• keyChar：返回按下键对应的字符（非功能键时）
• ctrlKey：判断是否按下Ctrl键
• shiftKey：判断是否按下Shift键
• altKey：判断是否按下Alt键

通过keyCode判断键盘输入

document.addEventListener('keyup', function(e) {    console.log('键盘松开：' + e.keyCode);});document.addEventListener('keydown', function(e) {    console.log('键盘按下：' + e.keyCode);});document.addEventListener('keypress', function(e) {    console.log('键盘按下（不含功能键）：' + e.keyChar);});

2. 鼠标事件

鼠标事件是跟踪用户鼠标操作的重要工具，常见的鼠标事件有以下几个：

鼠标事件类型

• click：鼠标左键单击时触发（右键或中间鼠标按钮不会触发）
• dblclick：鼠标左键双击时触发
• mousedown：鼠标任意按钮按下时触发
• mouseup：鼠标任意按钮松开时触发
• mousemove：鼠标在某个元素上移动时持续触发
• mouseover：鼠标指针悬停在某个元素上时触发
• mouseout：鼠标指针从某个元素上移出时触发

鼠标事件对象

鼠标事件对象提供了丰富的属性来获取鼠标的位置和状态：

• clientX：以浏览器窗口左上角为原点的x坐标
• clientY：以浏览器窗口左上角为原点的y坐标
• offsetX：以事件目标左上角为原点的x坐标
• offsetY：以事件目标左上角为原点的y坐标
• pageX：以页面左上角为原点的x坐标
• pageY：以页面左上角为原点的y坐标
• screenX：以屏幕左上角为原点的x坐标
• screenY：以屏幕左上角为原点的y坐标
• layerX：以绝对定位元素的左上角为原点的x坐标
• layerY：以绝对定位元素的左上角为原点的y坐标

鼠标位置获取

var posX = 0, posY = 0;var event = event || window.event;if (event.pageX || event.pageY) {    posX = event.pageX;    posY = event.pageY;} else if (event.clientX || event.clientY) {    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;}

鼠标事件的执行顺序

鼠标事件的执行顺序通常遵循以下规律：

• mousedown → mouseup → click → dblclick

3. HTML事件

HTML事件是跟踪用户与HTML元素交互的重要工具，常见的HTML事件有以下几个：

常见HTML事件

• load：文档或图片加载完成时触发
• unload：文档或图片卸载时触发
• select：文本被选中时触发
• change：内容被修改时触发
• focus：元素获得焦点时触发
• blur：元素失去焦点时触发
• scroll：滚动带滚动条的元素时触发
• submit：表单提交时触发
• reset：重置按钮被点击时触发

示例代码

window.onload = function() {    var d = document.getElementById('d');    d.onchange = function() {        alert('内容发生了变化');    };};

注意事项