当前位置：首页 > JavaScript

onmouseover实现js

2026-03-14 06:33:40JavaScript

onmouseover 事件的基本用法

onmouseover 是 JavaScript 中的一个事件，当鼠标指针移动到元素上时触发。可以通过 HTML 属性或 JavaScript 动态绑定来使用。

HTML 属性方式：

<div onmouseover="handleMouseOver()">悬停我</div>

JavaScript 动态绑定方式：

document.getElementById('element').onmouseover = function() {
  console.log('鼠标悬停');
};

事件监听器 addEventListener

现代 JavaScript 推荐使用 addEventListener 方法，可以避免覆盖已有的事件处理程序。

document.getElementById('element').addEventListener('mouseover', function() {
  this.style.backgroundColor = 'yellow';
});

与 mouseenter 的区别

onmouseover 会在鼠标进入元素或其子元素时触发，而 mouseenter 只在鼠标进入元素本身时触发。

// mouseover 会冒泡
document.querySelector('.parent').addEventListener('mouseover', () => {
  console.log('mouseover triggered');
});

// mouseenter 不会冒泡
document.querySelector('.parent').addEventListener('mouseenter', () => {
  console.log('mouseenter triggered');
});

实际应用示例

创建一个图片悬停放大效果：

<img id="zoom-img" src="image.jpg" width="200">

const img = document.getElementById('zoom-img');
img.addEventListener('mouseover', () => {
  img.style.transform = 'scale(1.2)';
  img.style.transition = 'transform 0.3s';
});

img.addEventListener('mouseout', () => {
  img.style.transform = 'scale(1)';
});

事件对象的使用

事件处理函数可以接收事件对象参数，获取相关信息：

element.addEventListener('mouseover', (event) => {
  console.log('鼠标位置:', event.clientX, event.clientY);
  console.log('目标元素:', event.target);
});

性能优化建议

对于需要频繁触发的鼠标事件，考虑使用防抖(debounce)或节流(throttle)技术优化性能：

onmouseover实现js

function throttle(func, limit) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

element.addEventListener('mouseover', throttle(function() {
  // 执行的操作
}, 100));