HTML元素onClick属性如何调用已引入外部JS中的自定义函数

你设想的<button onClick="sayHi()">click me</button>写法本身就可以正常生效，不需要额外做特殊适配。

内联事件属性（HTML中属性名不区分大小写，写onClick和标准小写onclick效果完全一致）里的JavaScript代码执行时，浏览器会对作用域链做特殊处理：会依次把当前触发事件的元素、元素所属的表单（如果存在）、document对象放在作用域链最前端，最终回退到全局window作用域查找变量。
你在index.js顶层定义的sayHi函数，只要JS文件正常加载，本质就是挂载在window对象上的全局方法window.sayHi，内联事件执行时完全可以检索到这个方法，点击按钮就会正常弹出'hi'提示。

代码示例 #

• index.js 中定义的自定义函数

function sayHi(){
   alert('hi')
}

• 可正常运行的两种内联事件写法
  • 直接调用内置API的写法：

  <button onclick="alert('hi')">click me</button>
  

  • 调用自定义全局函数的写法，和你设想的完全一致，可直接生效：

  <button onclick="sayHi()">click me</button>
  

注意事项 #

• 要保证点击按钮触发事件前，sayHi函数已经完成全局定义：最稳妥的方式是把引入index.js的<script>标签放在</body>闭合标签之前，避免JS加载顺序问题导致函数未定义报错。
• 如果给引入JS的script标签加了type="module"标识，脚本会进入ES模块模式，顶层定义的函数不会自动挂载到window全局作用域，这时候内联事件会找不到sayHi方法，需要手动把方法挂载到window上才能正常调用。

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