近期我在写一个插件，需要获取鼠标移动时，鼠标位置下的 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
后记
- 书山有路勤为径，学海无涯苦作舟 - 代码应该还有优化的余地，但是目前效果已经很棒了。
- 百度两分钟，群里一小时 - 有时候还是问问群友比较好，通过讨论研究，也能进步。
感谢分享代码的朋友的开源和分享，感谢群友的帮助和支持