未定义onclick事件

Question

我有以下文件，其中包含一个简单的按钮和一个onclick事件：

index.js：

const handleSignUp = event => {
  console.log("handleSignUp")
}

const personalInfo = `
  <button onclick="handleSignUp(event)" class="btn btn-success" id="signUpButton">
    Sign Up
  </button>
`;

export { personalInfo }

它的加载/渲染方式如下：

import { personalInfo } from './index.js';
window.onload = () => {
  document.getElementById('app').innerHTML = personalInfo;
}

这将引发错误，未定义handleSignUp。但是，这可行：

document.getElementById('signUpButton').addEventListener('click', () => {
  console.log("handleSignUp")
}

是否可以通过这种方式使用常规onclick事件，还是必须使用事件侦听器？我需要能够使用该handleSignUp按钮。