JavaScript常见HTML事件有哪些

# JavaScript常见HTML事件有哪些

在JavaScript中，HTML事件是用户或浏览器与网页交互时触发的动作。通过监听这些事件，开发者可以实现动态交互功能。以下是常见的HTML事件分类及示例：

## 1. 鼠标事件
- **`click`**：元素被点击时触发  
  ```html
  <button onclick="alert('Clicked!')">点击我</button>

• dblclick：双击元素时触发
  
• mouseover/mouseout：鼠标移入/移出元素时触发
  
• mousedown/mouseup：鼠标按下/释放时触发
  

2. 键盘事件

• keydown/keyup：键盘按键按下/释放时触发
  

  
  document.addEventListener('keydown', (e) => {
  console.log(`按下了键：${e.key}`);
  });
  

• keypress（已废弃）：按下字符键时触发
  

3. 表单事件

• submit：表单提交时触发
  
• change：表单元素值改变时触发（如输入框、下拉框）
  
• focus/blur：元素获得/失去焦点时触发
  

4. 窗口事件

• load：页面或资源加载完成时触发
  

  
  window.addEventListener('load', () => {
  console.log('页面加载完毕');
  });
  

• resize：浏览器窗口大小改变时触发
  
• scroll：页面滚动时触发
  

5. 其他事件

• touchstart/touchend（移动端）：触摸开始/结束时触发
  
• drag/drop：元素拖拽时触发
  

通过组合这些事件，开发者可以构建丰富的交互体验。例如，表单验证可通过submit和change事件实现，动态效果可通过鼠标/键盘事件驱动。

提示：使用addEventListener()绑定事件比HTML内联属性（如onclick）更灵活且易于维护。 “`

这篇文章总计约400字，采用Markdown格式，包含分类说明、代码示例和实用建议，适合前端学习参考。