事件监听器的范围

我已为此按钮添加了一个事件侦听器：

<button id="start" onclick="start();">Start</button>

如果我定义start()在js文件中的全局范围内运行函数，它工作得很好。

function start() {
  console.log("start clicked");
}

但我如何避免赋予它全局范围呢？如果我使用添加事件监听器会起作用吗addEventListener在本地范围内？还有其他办法吗？使用 HTML 添加事件侦听器是不好的做法吗？

一般是这样这不是一个好主意 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events使用内联事件处理程序。正如上面的链接中提到的：

您可以找到许多事件处理程序属性的 HTML 属性等效项；然而，你不应该使用它们——它们被认为是不好的做法。如果您只是快速执行某些操作，那么使用事件处理程序属性似乎很容易，但它们很快就会变得难以管理且效率低下。

最好用addEventListener在本地范围内，例如：

const btn = document.querySelector('#start');

function start() {
  console.log("start clicked");
}   

btn.addEventListener('click', start);

<button id="start">Start</button>

再次，正如上面链接中提到的：

与前面讨论的旧机制相比，该机制具有一些优点。首先，有一个对应的函数，removeEventListener()，这会删除先前添加的侦听器。这对于简单的小型程序来说并不重要，但对于更大、更复杂的程序来说，它可以提高清理旧的未使用的事件处理程序的效率。

另外，例如，这允许您使用相同的按钮在不同的情况下执行不同的操作 - 您所要做的就是根据需要添加或删除事件处理程序。

其次，您还可以为同一个侦听器注册多个处理程序。