常见 DOM 事件全解析

常见 DOM 事件全解析

DOM 事件是用户与网页交互的核心机制，分为 用户交互事件、文档加载事件、表单事件、键盘事件 等 8 大类：

---

一、鼠标事件

事件	触发时机	典型应用场景
click	点击元素（按下+释放）	按钮操作、导航跳转
dblclick	双击元素	文件/图片编辑
mousedown	鼠标按下	拖拽开始、自定义菜单
mouseup	鼠标释放	拖拽结束
mousemove	鼠标在元素上移动	实时坐标跟踪、绘图工具
mouseover	鼠标进入元素（冒泡）	悬停提示
mouseout	鼠标离开元素（冒泡）	关闭提示
mouseenter	鼠标进入元素（不冒泡）	精确悬停控制
mouseleave	鼠标离开元素（不冒泡）	离开动画
contextmenu	右键点击	自定义上下文菜单

示例：拖拽实现

let isDragging = false;

element.addEventListener('mousedown', () => {
   
  isDragging = true;
});

document.addEventListener('mousemove', (e) => {
   
  if (isDragging) {
   
    element.style.left = `${
     e.clientX}px`;
    element.style.top = `${
     e.clientY}px`;
  }
});

document.addEventListener('mouseup', (