当前位置：首页 > JavaScript

js实现onmouseover

2026-04-06 14:03:25JavaScript

onmouseover 事件的基本用法

在 JavaScript 中，onmouseover 事件在鼠标指针移动到元素上时触发。可以通过 HTML 属性或 JavaScript 动态绑定来实现。

HTML 属性方式：

<div onmouseover="handleMouseOver()">悬停这里</div>
<script>
  function handleMouseOver() {
    console.log('鼠标悬停在元素上');
  }
</script>

JavaScript 动态绑定：

js实现onmouseover

<div id="hoverElement">悬停这里</div>
<script>
  document.getElementById('hoverElement').onmouseover = function() {
    console.log('鼠标悬停在元素上');
  };
</script>

使用 addEventListener 绑定事件

推荐使用 addEventListener 方法绑定事件，可以避免覆盖已有的事件处理函数，并支持多个监听器。

<div id="hoverElement">悬停这里</div>
<script>
  document.getElementById('hoverElement').addEventListener('mouseover', function() {
    console.log('鼠标悬停在元素上');
  });
</script>

事件对象的使用

onmouseover 事件的处理函数可以接收一个事件对象参数，包含事件相关的信息。

js实现onmouseover

document.getElementById('hoverElement').addEventListener('mouseover', function(event) {
  console.log('触发事件的元素:', event.target);
  console.log('鼠标位置 - X:', event.clientX, 'Y:', event.clientY);
});

与 mouseenter 的区别

onmouseover 和 onmouseenter 类似，但 onmouseover 会在鼠标进入元素或其子元素时触发，而 onmouseenter 只在鼠标进入元素本身时触发。

<div id="parent">
  父元素
  <div id="child">子元素</div>
</div>
<script>
  document.getElementById('parent').addEventListener('mouseover', function() {
    console.log('mouseover 触发');
  });
  document.getElementById('parent').addEventListener('mouseenter', function() {
    console.log('mouseenter 触发');
  });
</script>

实际应用示例

改变元素样式：

<div id="hoverElement" style="width: 100px; height: 100px; background: lightblue;">悬停这里</div>
<script>
  document.getElementById('hoverElement').addEventListener('mouseover', function() {
    this.style.background = 'lightgreen';
  });
  document.getElementById('hoverElement').addEventListener('mouseout', function() {
    this.style.background = 'lightblue';
  });
</script>

显示提示信息：

<button id="tooltipButton">按钮</button>
<div id="tooltip" style="display: none;">提示信息</div>
<script>
  document.getElementById('tooltipButton').addEventListener('mouseover', function() {
    document.getElementById('tooltip').style.display = 'block';
  });
  document.getElementById('tooltipButton').addEventListener('mouseout', function() {
    document.getElementById('tooltip').style.display = 'none';
  });
</script>