JavaScript 中怎么监听鼠标移入与移出元素的事件-js教程-PHP中文网

javascript中监听鼠标移入移出首选mouseenter/mouseleave事件，它们不冒泡、不因子元素触发，比mouseover/mouseout更精准；可通过addeventlistener绑定，支持批量操作与事件委托，兼容ie9+。

javascript 中怎么监听鼠标移入与移出元素的事件

JavaScript 中监听鼠标移入和移出元素，主要用 mouseenter 和 mouseleave 事件，它们比 mouseover 和 mouseout 更精准，不会因子元素触发而冒泡干扰。

使用 mouseenter 和 mouseleave

这两个事件只在鼠标真正进入/离开绑定元素的边界时触发，不响应内部子元素的进出，适合做悬停交互（比如显示提示框、高亮菜单项）：

给目标元素调用 addEventListener，类型传 "mouseenter" 或 "mouseleave"
回调函数中可直接操作 DOM 或执行逻辑，无需手动判断事件目标

示例：

const box = document.getElementById("myBox");<br>box.addEventListener("mouseenter", () => {<br>  box.style.backgroundColor = "#e3f2fd";<br>});<br>box.addEventListener("mouseleave", () => {<br>  box.style.backgroundColor = "#fff";<br>});

注意 mouseover 和 mouseout 的区别

它们会冒泡，且只要鼠标经过任意子元素就会反复触发，容易造成意外行为：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

mouseover 在进入元素或其任意子元素时都触发
mouseout 在离开元素或移入其子元素时也会触发（因为“离开了当前元素”）
如果确实要用它们，可通过 e.relatedTarget 判断是否真的移出了整个区域，但代码更复杂、易出错

批量监听多个元素

对一组元素统一添加悬停效果，推荐用事件委托或循环绑定：

用 document.querySelectorAll 获取所有目标元素，遍历添加事件
若元素动态增删，可监听父容器的 mouseenter/mouseleave，再用 e.target 判断是否匹配选择器

例如：

document.querySelectorAll(".nav-item").forEach(item => {<br>  item.addEventListener("mouseenter", highlight);<br>  item.addEventListener("mouseleave", unhighlight);<br>});