104. 常见事件类型详解

鼠标事件

click vs mousedown vs mouseup

// click = mousedown + mouseup（同一个元素上）
element.addEventListener("mousedown", function () {
  console.log("按下了");
});
element.addEventListener("mouseup", function () {
  console.log("松开了");
});
element.addEventListener("click", function () {
  console.log("一次点击完成");
});

mouseenter vs mouseover

// mouseenter：不冒泡，只在进入元素本身时触发
element.addEventListener("mouseenter", function () {
  console.log("进入元素");
});

// mouseover：冒泡，进入子元素也会触发
element.addEventListener("mouseover", function () {
  console.log("鼠标在上面");
});

contextmenu：右键菜单

element.addEventListener("contextmenu", function (e) {
  e.preventDefault(); // 阻止默认右键菜单
  // 显示自定义菜单
});

鼠标位置

element.addEventListener("click", function (e) {
  console.log("视口坐标:", e.clientX, e.clientY);
  console.log("页面坐标:", e.pageX, e.pageY);
  console.log("屏幕坐标:", e.screenX, e.screenY);
});

• clientX/Y：相对于浏览器视口
• pageX/Y：相对于整个页面（含滚动距离）
• screenX/Y：相对于显示器屏幕

键盘事件

三个事件的触发顺序

按下按键时顺序是：keydown → keypress → keyup

input.addEventListener("keydown", function (e) {
  console.log("按下了:", e.key);
});

input.addEventListener("keyup", function (e) {
  console.log("松开了:", e.key);
});

常用键值

document.addEventListener("keydown", function (e) {
  if (e.key === "Enter") console.log("回车");
  if (e.key === "Escape") console.log("ESC");
  if (e.key === "Tab") console.log("Tab");
  if (e.key === " ") console.log("空格");
});

组合键

document.addEventListener("keydown", function (e) {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault(); // 阻止浏览器保存
    console.log("自定义保存");
  }
  if (e.shiftKey && e.key === "A") {
    console.log("Shift+A");
  }
  if (e.altKey && e.key === "F4") {
    console.log("Alt+F4");
  }
  if (e.metaKey && e.key === "z") {
    console.log("Cmd/Ctrl+Z 撤销");
  }
});

属性	含义
e.ctrlKey	是否按着 Ctrl
e.shiftKey	是否按着 Shift
e.altKey	是否按着 Alt
e.metaKey	是否按着 Cmd（Mac）或 Win（Windows）
e.key	按键的字符串值
e.code	物理键位代码

表单事件

input vs change

const input = document.querySelector("input");

input.addEventListener("input", function (e) {
  console.log("输入变化:", e.target.value); // 每次输入都触发
});

input.addEventListener("change", function (e) {
  console.log("值变更:", e.target.value); // 失去焦点且值变了才触发
});

事件	触发时机	频率
input	每次输入/粘贴	高
change	失去焦点且值变了	低
focus	获得焦点	-
blur	失去焦点	-

submit 事件

form.addEventListener("submit", function (e) {
  e.preventDefault(); // 阻止跳转
  const formData = new FormData(this);
  // 用 fetch 发送数据
});

窗口事件

// 页面加载完成（包括图片、样式）
window.addEventListener("load", function () {
  console.log("所有资源加载完");
});

// DOM 解析完成（不用等资源）
document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM 解析完成，可以操作元素了");
});

// 窗口大小变化
window.addEventListener("resize", function () {
  console.log("窗口大小变了:", window.innerWidth, window.innerHeight);
});

// 滚动
window.addEventListener("scroll", function () {
  console.log("滚动了");
});

// 页面关闭前
window.addEventListener("beforeunload", function (e) {
  e.preventDefault(); // 弹出确认框
});

触摸事件（移动端）

element.addEventListener("touchstart", function (e) {
  console.log("手指触碰");
});

element.addEventListener("touchmove", function (e) {
  console.log("手指移动");
});

element.addEventListener("touchend", function () {
  console.log("手指离开");
});

触摸位置

element.addEventListener("touchstart", function (e) {
  const touch = e.touches[0]; // 第一个手指
  console.log("触摸点:", touch.clientX, touch.clientY);
});

element.addEventListener("pointerdown", function (e) {
  console.log("输入开始，类型:", e.pointerType); // mouse / touch / pen
});

焦点事件

input.addEventListener("focus", function () {
  console.log("获得焦点");
});

input.addEventListener("blur", function () {
  console.log("失去焦点");
});

// focusin/focusout 会冒泡
parent.addEventListener("focusin", function (e) {
  console.log("子元素获得了焦点");
});

事件	冒泡
focus	否
blur	否
focusin	是
focusout	是

实用组合：防抖输入

搜索框输入时等用户停手再请求：

let timer;
searchInput.addEventListener("input", function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
    console.log("用户停手了，请求搜索:", searchInput.value);
  }, 300); // 300ms 内没新输入才请求
});

事件速查表

类别	事件	典型用途
鼠标	click, dblclick	点击交互
鼠标	mouseenter, mouseleave	悬停效果
鼠标	contextmenu	自定义右键菜单
键盘	keydown, keyup	快捷键
表单	input, change	实时校验
表单	submit	拦截提交
窗口	resize	响应式布局
窗口	scroll	无限滚动
触摸	touchstart/move/end	移动端手势
触摸	pointerdown/move/up	统一输入事件
焦点	focus, blur	表单交互反馈