在元素加载后向其添加事件侦听器（vanilla JS）

Question

我的网站有各种操作的事件侦听器。目前，一旦整个 DOM 加载完毕，我就会将这些事件监听器添加到我的元素中，如下所示：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("someid").addEventListener("click", somefunction(); });
})

我收到一些互联网连接较差的用户的反馈，他们有时必须等待整整一分钟才能加载整个页面，然后网站才能正常工作..

有没有一种方法可以在元素加载到页面上时为其添加事件侦听器，而不是等待整个 DOM 加载？我不想再像以前那样在 HTML 中使用 onclick="" 。

我选择只使用普通的 javascript。

提前致谢。

Answer 1

不幸的是，除了优化和加速网站之外，您无能为力。

Js 事件监听器仅在整个 DOM 被加载和解析后才会激活。

您可以在 html 文件的 head 部分包含 script 标签（加载 js）+使用 defer（或 type="module"）属性来确保 js 并发下载到 html，并且仅在 HTML 完全解析后执行。

<script src="your_script.js" defer></script>

其他一些优化包括： 延迟加载和优化文件