← 返回目录

10. 鼠标事件与 event 对象

鼠标事件就是点击、移动、滚轮这些鼠标操作。event 对象包含坐标、按键等信息。

核心五种：
① click / dblclick——单击/双击
② mouseover / mouseout——移入/移出
③ mousedown / mouseup——按下/抬起
④ mousemove——移动
⑤ event.clientX / clientY——鼠标坐标

坑：mouseover 会冒泡（子元素也触发）、mouseenter 不冒泡、坐标分 clientX（视口）和 pageX（页面）。

10.1 互动演示（在盒子里移动/点击）

我是外框（蓝）
红块
在蓝框 / 红块上移动或点击： 被碰到的会亮， 下面同步报告单。

10.2 知识点逐条讲解

① 常用鼠标事件表

事件什么时候触发会不会往上传
click单击会
dblclick双击会
mouseover / mouseout移进 / 移出会冒泡
mouseenter / mouseleave移进 / 移出自身不冒泡
mousemove在里面一直动会（触发极频繁）

② event 对象报告单上有啥

// 点这个盒子时，浏览器自动递来报告单 e
box.addEventListener('click', function (e) {
  // e 就是浏览器自动递过来的报告单

  // 这是什么事件："click"
  console.log(e.type);

  // 你真点中的那个元素
  console.log(e.target);

  // 这个监听绑在谁身上
  console.log(e.currentTarget);

  // 鼠标现在的坐标
  console.log(e.clientX, e.clientY);
});

③ e.target 和 e.currentTarget 差在哪（必考）

打个比方：你在教室拍了一下桌子，e.target 是那张桌子（你真碰的），e.currentTarget 是这个教室（规矩定在这）。点红块、监听绑在蓝框上：target 是红块，currentTarget 是蓝框。

④ mouseenter 不冒泡，mouseover 会冒泡

如果你用 mouseover 做悬浮高亮，鼠标从父元素移到里面小元素时会反复闪。因为 mouseover 会往上传，进出小元素都算"移出/移入"父元素；想要"进一次只亮一次"，就用不冒泡的 mouseenter / mouseleave。表格隔行高亮那页用的就是它。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：悬浮卡片、坐标提示、鼠标跟随效果。

② 常见坑：用 mouseover 做悬浮反复闪；分不清 target 和 currentTarget。

③ 怎么解决：悬浮高亮用 mouseenter/leave；target 是真点中的，currentTarget 是绑监听的。

一句话记住：e.target 是真点中的，e.currentTarget 是绑监听的；悬浮高亮用不冒泡的 mouseenter/leave，别用会冒泡的 mouseover/out。

本页重点

API作用参数返回值代码示例
addEventListener('mouseover')移进触发(会冒泡)函数无box.addEventListener('mouseover', fn);
addEventListener('mouseenter')移进触发(不冒泡)函数无box.addEventListener('mouseenter', fn);
e.target你真点中的那个元素无元素console.log(e.target);
e.currentTarget监听绑在谁身上无元素console.log(e.currentTarget);
e.clientX / clientY鼠标坐标无数字console.log(e.clientX, e.clientY);