如何在HTML中通过hover事件调用JavaScript函数？

我来帮你梳理下changeDef(event)无响应、mouseover快速移动失效的核心原因，以及对应的解决思路：

1. 别踩HTML事件属性的坑：没有onhover这个写法！ #

首先要明确：HTML元素不存在onhover事件属性！如果你是在img标签里写了onhover="changeDef(event)"，那浏览器完全不会识别这个属性，自然没反应。正确的做法是用onmouseover（鼠标进入）和onmouseout（鼠标离开）来模拟hover的两种状态，或者更推荐用JS事件监听绑定mouseenter/mouseleave（这两个事件不会冒泡，稳定性更高）。

2. 函数changeDef可能不在全局作用域 #

如果你的changeDef函数是包裹在闭包里（比如DOMContentLoaded回调、模块代码或者jQuery的ready函数里），那HTML内联调用onmouseover="changeDef(event)"会找不到这个函数——因为它没有挂载到全局window对象上。

解决办法：

• 要么把函数暴露到全局：

  // 在函数定义后添加这句，把函数挂载到window上
  window.changeDef = changeDef;
  

• 更推荐放弃内联事件，改用JS事件监听（代码解耦，更易维护）：

  // 确保DOM加载完成后再绑定事件
  document.addEventListener('DOMContentLoaded', function() {
    const targetImg = document.querySelector('.img-default');
    // 用mouseenter代替mouseover，避免快速移动时的冒泡问题
    targetImg.addEventListener('mouseenter', changeDef);
    // 如果需要处理鼠标离开逻辑，再加mouseleave事件
    targetImg.addEventListener('mouseleave', function(event) {
      console.log('鼠标离开元素', event.target);
    });
  });
  

3. JS代码加载时机不对，元素还没渲染就绑定事件 #

如果你的JS代码放在<head>标签里，或者在img元素之前加载，那执行document.querySelector('.img-default')时，这个img元素还没被浏览器解析出来，自然绑定不上事件。

解决办法：

• 把JS代码放在</body>标签的末尾，让DOM先渲染再执行JS；
• 或者用上面提到的DOMContentLoaded事件包裹绑定逻辑，确保DOM加载完成后再操作元素。

4. 快速移动鼠标时mouseover失效？换mouseenter就稳了！ #

mouseover会在鼠标进入元素或其子元素时都触发，还容易因为事件冒泡导致快速移动时出现“丢事件”的情况；而mouseenter只会在鼠标第一次进入元素本身时触发，不会冒泡，稳定性拉满，完全适合模拟hover的进入状态。

给你整理一个完整的可运行示例： #

<!DOCTYPE html>
<html>
<body>
  <img class="img-default" src="./img/footer1.png" alt="默认图片">

  <script>
    function changeDef(event) {
      console.log('鼠标进入元素：', event.target);
    }

    // 等待DOM加载完成后绑定事件
    document.addEventListener('DOMContentLoaded', function() {
      const targetImg = document.querySelector('.img-default');
      targetImg.addEventListener('mouseenter', changeDef);
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Noa