JavaScript HTML事件属性与鼠标键盘事件详解
本文介绍了HTML 4.0中通过事件属性触发JavaScript行为的方法，详细列举了onclick、onkeydown等常用鼠标与键盘事件属性，并解析了事件对象中的altKey、clientX等关键属性，帮助开发者掌握前端交互的基础实现。
HTML事件属性基础
HTML 4.0规范引入了一项重要特性，允许通过事件机制在浏览器中触发特定行为，例如当用户点击HTML元素时执行JavaScript代码。以下列出了可嵌入HTML标签的属性，用于定义具体的事件响应行为。
通用事件属性列表
| 属性 | 此事件发生在何时... |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
鼠标与键盘事件
鼠标与键盘相关的事件属性
事件对象属性详解
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
常用HTML元素事件
以下是常见HTML元素支持的事件类型：
onclick（单击事件）、 ondblclick（双击事件）、 onkeydown（按键按下事件）、 onkeypress（按键点击事件）、 onkeyup（按键释放事件）、 onmousedown（鼠标按下事件）、 onmousemove（鼠标移动事件）、 onmouseout（鼠标移出元素范围事件）、 onmouseover（鼠标移入元素范围事件）、 onmouseup（鼠标按键释放事件）、 oncontextmenu（右键菜单触发事件）
以上内容涵盖了本文的核心知识点，希望能为读者提供有价值的参考。
AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19