Onclick 函数在加载事件侦听器中时未调用答案

【问题标题】：Onclick function not called when its inside a load event listenerOnclick 函数在加载事件侦听器中时未调用
【发布时间】：2019-07-17 23:21:02
【问题描述】：

我想确保我的 javascript 仅在加载所有内容后才能工作。所以，我把我的代码放在一个加载事件监听器中。如果我在该事件中创建一个函数，并尝试在 onclick 事件中调用它，在一个按钮中，我会收到一个错误，提示我的函数未定义。

错误：未捕获的引用错误：sayHello 未定义在 HTMLButtonElement.onclick

如果我从加载事件中删除该函数，它就可以工作。为什么会这样？

index.html

<html>
<head>
    <script src="/js/index.js"></script>
</head>
<body>

    <button onclick="sayHello()">Say Hello</button>

</body>
</html>

index.js

window.addEventListener("load", async () => {

    function sayHello(){
        alert("Hello!");
    }

});

【问题讨论】：

Function is not defined - uncaught referenceerror的可能重复
要么不要在 load 监听器中声明函数，要么在其中绑定 click 事件监听器。考虑使用DOMContentLoaded 而不是load，avoid 使用onclick 之类的属性。为什么你的监听器是 async 函数？
@SebastianSimon，感谢您的回答！我试过DOMContentLoaded，但我得到了同样的错误。我的听众是async，因为我将使用一些等待导入。为什么使用onclick 是个坏主意？
解决方案不是DOMContentLoaded；这是第一句话。像onclick 或oninput 这样的内联事件处理程序是not recommended。它们是注册事件的obsolete, hard-to-maintain and unintuitive 方式。总是use addEventListener。
感谢您的帮助！

【解决方案1】：

像这样试试。在这个模型中，直到DOMContentLoaded 事件被触发，我们才分配click 函数。

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.sayHello').addEventListener('click', () => console.log('Hi'))
});

<html>
<head>
    <script src="/js/index.js"></script>
</head>
<body>
    <button class="sayHello">Say Hello</button>
</body>
</html>

【讨论】：