10. 鼠标事件与 event 对象

你每动一下鼠标，浏览器都会塞给你一张"事件报告单"（event 对象）：你到底点的是谁、鼠标在哪个位置。报告单上最关键两栏是 e.target（你真点中的那个）和 e.currentTarget（事件绑在谁身上）——分不清这俩，后面的事件委托就写不对。

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

我是外框（蓝）

红块

在蓝框、红块上移动或点击，看报告单上写的是谁、鼠标在哪。

10.2 知识点逐条讲解

① 常用鼠标事件表

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

② event 对象报告单上有啥

box.addEventListener('click', function (e) { // 点这个盒子时，浏览器自动递来报告单 e
  // e 就是浏览器自动递过来的报告单
  console.log(e.type);        // 这是什么事件："click"
  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。