JavaScript 面试题
目录

JavaScript 中常用的 DOM 事件有哪些?

· 约 3 分钟读完 · 第 414 / 507 章

推荐答案

在 JavaScript 中,常用的 DOM 事件可以分为以下几类:

  1. 鼠标事件:

    • click:用户点击元素时触发。
    • dblclick:用户双击元素时触发。
    • mousedown:用户按下鼠标按钮时触发。
    • mouseup:用户释放鼠标按钮时触发。
    • mousemove:用户移动鼠标时触发。
    • mouseover:鼠标移动到元素上时触发。
    • mouseout:鼠标移出元素时触发。
    • mouseenter:鼠标进入元素时触发。
    • mouseleave:鼠标离开元素时触发。
  2. 键盘事件:

    • keydown:用户按下键盘上的任意键时触发。
    • keyup:用户释放键盘上的键时触发。
    • keypress:用户按下并释放键盘上的字符键时触发。
  3. 表单事件:

    • submit:表单提交时触发。
    • change:表单元素的值发生变化时触发。
    • focus:元素获得焦点时触发。
    • blur:元素失去焦点时触发。
    • input:用户在输入框中输入时触发。
  4. 窗口事件:

    • load:页面或资源加载完成时触发。
    • resize:窗口大小改变时触发。
    • scroll:用户滚动页面时触发。
    • unload:页面卸载时触发。
  5. 触摸事件:

    • touchstart:用户触摸屏幕时触发。
    • touchmove:用户在屏幕上移动手指时触发。
    • touchend:用户停止触摸屏幕时触发。
    • touchcancel:触摸被意外中断时触发。
  6. 其他事件:

    • contextmenu:用户右键点击元素时触发。
    • drag:元素被拖动时触发。
    • drop:元素被放置到目标区域时触发。
    • error:资源加载失败时触发。

本题详细解读

1. 鼠标事件

鼠标事件是与用户鼠标操作相关的事件。这些事件可以用于处理用户与页面的交互,例如点击、双击、鼠标移动等。click 是最常用的鼠标事件,通常用于处理按钮点击或链接跳转。mouseover 和 mouseout 可以用于实现悬停效果,而 mousemove 可以用于跟踪鼠标的移动。

2. 键盘事件

键盘事件用于处理用户的键盘输入。keydown 和 keyup 可以用于检测用户按下或释放键盘上的任意键,而 keypress 则专门用于处理字符键的输入。这些事件常用于表单验证或快捷键的实现。

3. 表单事件

表单事件与表单元素的操作相关。submit 事件在表单提交时触发,通常用于表单验证或数据提交前的处理。change 事件在表单元素的值发生变化时触发,常用于实时更新页面内容。focus 和 blur 事件用于处理元素的焦点变化,通常用于输入框的提示信息或验证。

4. 窗口事件

窗口事件与浏览器窗口的操作相关。load 事件在页面或资源加载完成时触发,常用于初始化页面内容。resize 事件在窗口大小改变时触发,通常用于响应式布局的调整。scroll 事件在用户滚动页面时触发,常用于实现无限滚动或动态加载内容。

5. 触摸事件

触摸事件用于处理移动设备上的触摸操作。touchstart、touchmove 和 touchend 分别对应触摸的开始、移动和结束。这些事件可以用于实现手势操作或触摸交互。

6. 其他事件

其他事件包括一些特殊用途的事件。contextmenu 事件可以用于自定义右键菜单,drag 和 drop 事件用于实现拖放功能,error 事件用于处理资源加载失败的情况。

通过理解和掌握这些常用的 DOM 事件,开发者可以更好地处理用户与页面的交互,提升用户体验。