Question

我的index.html包含两个javascript代码：plugin.js和main.js（主要包含在插件之后），
我想将plugin.js作为可重用的插件，比如检查index.html文件是否包含click-me类属性的任何元素，如果index.html有这种元素，那么将每种这样的元素设置为eventListener。

我希望我的window.onload功能始终位于main.js而不是plugin.js，但在这种情况下，我无法使用plugin.js功能。通过plugin.js中的className获取DOM对象，我也不想在main.js中调用y = (18 * 100) / maxY的任何函数。

有人有什么想法吗？

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

好吧，你应该正确地使用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");
  });

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

哦，最后一件事 - 除非需要，否则不要在你的身体之前链接你的脚本。他们阻止解析页面。

Answer 3

为什么不直接检查点击的元素是否具有root用户的click-me类？它使你只能在身体上声明一个监听器。

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

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

3 个答案: