Javascript: 将 eventListener 设置为 DOM 没有 window.onload 的对象？

Question

我的 index.html 包含两个 javascript 代码，分别是 plugin.js 和 main.js（插件后主要包含），
我想把 plugin.js 作为一个可重复使用的插件，比如检查 index.html 文件是否有任何具有 click-me class 属性的元素，如果 index.html 有这种的元素，然后为每个此类元素设置一个 eventListener。

我希望我的 window.onload 函数始终在 main.js 而不是 plugin.js 中，但在这种情况下我无法通过 className 获取 DOM 对象在 plugin.js 中，我也不想在 main.js 中调用 plugin.js 的任何函数。

有人知道吗？

Answer 1

您可以只在正文之后包含脚本。

<body>
</body>
<!-- add your scripts here -->

那么你就不需要再检查文档是否准备好了，这样的缺点是只有在页面完全呈现后才开始下载。

另一种可能性是使用 defer

<script type="text/javascript" src="plugin.js" defer></script>
<script type="text/javascript" src="main.js" defer></script>

这种方式会尽快下载脚本，但只会在页面准备好后按顺序执行。

更详细的回答here

Answer 2

为什么不直接检查被点击的元素是否有来自根的 click-me class？它使您只在主体上声明一个侦听器。

function listener(event) {
    if(event.target.classList.contains("click-me")) {
        // Do something
    }
}
document.body.addEventListener("click", listener, true);

Answer 3

嗯，你应该正确使用 onload 作为事件侦听器：

window.addEventListener("load", function() {

});

在 main.js 和 plugin.js 中都可以根据需要添加任意多次。

此外，最好使用 DOMContentLoaded 事件，因为它不会等待加载图像。这真的很重要，如果您依赖 window.onload，那么在访问的前 10 秒内，仅一张待定图像就会使您的页面变得毫无用处。它是这样使用的：

  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

但是它有兼容性问题，所以我建议使用一些库。

哦，还有最后一件事 - 除非需要，否则不要 link 在正文之前编写脚本。它们会阻止页面解析。

Javascript: 将 eventListener 设置为 DOM 没有 window.onload 的对象？

Javascript: Set eventListener to DOM object without window.onload?

javascript

jquery

dom

onload