JavaScript 获取鼠标所在区域的 DOM 元素

近期我在写一个插件，需要获取鼠标移动时，鼠标位置下的 dom 元素。

笨办法，遍历元素标签

遍历页面上所有带 magic-hover 类名的元素

var hoverEls = document.querySelectorAll('.magic-hover');
hoverEls.forEach((item, i) => {
  item.addEventListener('mouseenter', (event) => {
    // 添加鼠标移入事件
  });

  item.addEventListener('mouseleave', (event) => {
    // 添加鼠标移出事件
  });
});

这段代码有个明显的缺点，第一你得主动去给元素添加 magic-hover 的类名

第二，运行代码之后，后面新增的元素不会触发事件

进阶，给所有元素加上事件

document.querySelectorAll('*').forEach(function (node) {
  node.onmouseover = (e) => {
    // 鼠标移入事件
  };
  node.mouseout = (e) => {
    // 鼠标移出事件
  };
});

解决了需要自己给元素加类名问题，但是仍然存在运行代码之后，后面新增的元素不会触发事件这样的问题。

而且存在性能问题，你想想，如果页面上有大量的元素，每个元素都挂载上事件监听，可能会引发性能问题吧。

大佬指点

群里的 凌寒初见，资深 API 调用师，时间大师_Logic，这三位大佬指出，可以用事件监听方法。直接在 body 上进行监听就可以了，代码如下。

document.body.onmousemove = (event) => {
  console.log('event.target :>> ', event.target);
};

document.body.onclick = (event) => {
  console.log('event.target :>> ', event.target);
};

这两段代码，越用越香，太香太好使了。

然后资深全栈开发（真），chrome 底层开发专家 - 凌寒初见 还指出了 F12 DevTools 中元素选择器的源码地址

源码路径 \third_party\blink\renderer\core\dom\events\event.cc

后记

书山有路勤为径，学海无涯苦作舟 - 代码应该还有优化的余地，但是目前效果已经很棒了。
百度两分钟，群里一小时 - 有时候还是问问群友比较好，通过讨论研究，也能进步。

感谢分享代码的朋友的开源和分享，感谢群友的帮助和支持