如何在HTML的onclick事件中调用JavaScript模块内的函数？

这个问题我之前也碰到过！核心原因是ES模块的作用域特性：当你使用<script type="module">标签时，代码会运行在独立的模块作用域中，而不是全局作用域。你定义的sayhello函数只在模块内部可见，HTML里的onclick属性是在全局作用域下查找函数，自然会抛出ReferenceError。

下面给你几种可行的解决方案：

方案1：将函数挂载到全局window对象（简单但不推荐） #

如果只是快速测试，可以把函数显式挂载到全局的window对象上，让onclick能找到它：

<h1 onclick="sayhello()">Hello World</h1>
<script type="module">
  // 把函数挂载到全局window
  window.sayhello = () => {
    console.log('Hello');
  };
</script>

⚠️ 注意：这种方式会污染全局作用域，在大型项目中不建议使用，容易引发变量冲突。

方案2：使用addEventListener绑定事件（推荐） #

这是现代JavaScript开发的标准做法，不需要依赖全局变量，代码更模块化：

<!-- 给元素加一个唯一ID -->
<h1 id="helloHeading">Hello World</h1>
<script type="module">
  // 获取DOM元素
  const heading = document.getElementById('helloHeading');
  // 绑定点击事件
  heading.addEventListener('click', () => {
    console.log('Hello');
  });
</script>

这种方式把事件逻辑和HTML结构解耦，更易维护，也避免了全局污染。

方案3：ES模块导出导入（适合复杂项目） #

如果你的项目是模块化架构，可以把函数单独抽离到模块文件中，再导入使用：

1. 新建utils.js模块文件：

// utils.js
export const sayhello = () => {
  console.log('Hello');
};

2. 在主页面导入并绑定事件：

<h1 id="helloHeading">Hello World</h1>
<script type="module">
  import { sayhello } from './utils.js';
  const heading = document.getElementById('helloHeading');
  heading.addEventListener('click', sayhello);
</script>

这种方式适合大型项目，代码拆分更清晰，完全遵循模块化开发规范。

总的来说，方案2和方案3是更推荐的做法，既能解决问题，又能保持代码的可维护性。

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