JavaScript HTML事件属性与鼠标键盘事件详解

作者:白露

时间:2026-10-28

浏览:136

本文介绍了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(右键菜单触发事件)

以上内容涵盖了本文的核心知识点,希望能为读者提供有价值的参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章