常见事件类型

JavaScript提供丰富的事件类型用于响应用户交互和状态变化。

鼠标事件

事件	说明
click	单击
dblclick	双击
mousedown	鼠标按下
mouseup	鼠标释放
mousemove	鼠标移动
mouseenter	鼠标进入（不冒泡）
mouseleave	鼠标离开（不冒泡）
mouseover	鼠标悬停（冒泡）
mouseout	鼠标移出（冒泡）
contextmenu	右键菜单

JavaScript

element.addEventListener('click', (e) => {
  console.log('单击位置:', e.clientX, e.clientY);
});

element.addEventListener('contextmenu', (e) => {
  e.preventDefault();  // 禁用右键菜单
});

注意：mouseenter/mouseleave 不冒泡，mouseover/mouseout 会冒泡。

键盘事件

事件	说明
keydown	按键按下
keyup	按键释放
keypress	字符键按下（已废弃）

JavaScript

document.addEventListener('keydown', (e) => {
  console.log('按键:', e.key, '键码:', e.code);

  // 组合键判断
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    console.log('保存');
  }
});

表单事件

事件	说明	触发时机
input	输入内容变化	实时触发
change	值改变	失去焦点后
focus	获得焦点	-
blur	失去焦点	-
submit	表单提交	-
reset	表单重置	-

JavaScript

// 实时监听输入
input.addEventListener('input', (e) => {
  console.log(e.target.value);
});

// 表单提交
form.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('提交表单');
});

注意：input 事件实时触发，change 事件在失去焦点且值改变后触发。

文档/窗口事件

事件	说明
load	资源加载完成
DOMContentLoaded	DOM解析完成
resize	窗口大小改变
scroll	滚动
beforeunload	页面即将卸载

JavaScript

// DOM加载完成
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM已就绪');
});

// 窗口大小改变
window.addEventListener('resize', () => {
  console.log('窗口大小:', window.innerWidth);
});

// 页面关闭前提醒
window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = '';
});

拖拽事件

事件	说明
drag	拖拽中
dragstart	开始拖拽
dragend	结束拖拽
dragenter	拖入目标
dragover	在目标上方
dragleave	离开目标
drop	放下

JavaScript

element.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text', e.target.id);
});

target.addEventListener('dragover', (e) => {
  e.preventDefault();  // 必须阻止默认行为
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text');
  target.appendChild(document.getElementById(id));
});

触摸事件（移动端）

事件	说明
touchstart	触摸开始
touchmove	触摸移动
touchend	触摸结束
touchcancel	触摸取消

JavaScript

element.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  console.log('触摸位置:', touch.clientX, touch.clientY);
});

要点总结

鼠标事件注意 mouseenter/mouseleave 不冒泡的特性
键盘事件用 keydown，keypress 已废弃
input 实时监听，change 失焦后触发
DOMContentLoaded 比 load 更早触发
拖拽事件需在 dragover 中阻止默认行为

📝 发现内容有误？点击此处直接编辑