JavaScript 内联事件侦听器...它们是否等待 JS 加载？答案

【问题标题】：JavaScript inline event listeners...do they wait for JS to load?JavaScript 内联事件侦听器...它们是否等待 JS 加载？
【发布时间】：2011-04-01 23:31:33
【问题描述】：

我通常使用 jQuery，因为它使用文档就绪功能很方便，因此我可以等到 DOM 就绪后再将事件侦听器附加到 DOM 元素。

我继承了一个项目，该项目至少在一段时间内将使用大量内联事件调用：

<element onclick="doThis()">

不漂亮，但我必须使用它。

通常我会在 HTML 页面的底部加载 JS 文件。但是，如果我在这种情况下这样做，事件会等到文档准备好（正文加载）再尝试执行，还是会在单击元素后立即触发 onclick 事件，无论是否有那个大的 JS 文件已经加载了吗？

我认为后者会发生，这意味着在这种情况下，我暂时无法将我的 JS 文件移出 HEAD。但想确认。

【问题讨论】：

您要查找的术语是“属性”。这是一个 HTML 属性。
你是对的。也许我应该称它为“属性 javascript 调用”？只是听起来很奇怪。我一直认为“onclick”是一个事件。并且“onclick”属性是“监听”所述事件。

标签： javascript load

【解决方案1】：

HTML 元素上的事件处理属性就像一个迷你脚本块，独立于页面上的其他脚本块进行评估。在 onclick="" 的情况下，一旦元素被读入 DOM，事件处理程序属性就会被评估，如果元素被点击，就会尝试运行。

顺便说一句，您可以将这些属性视为函数。属性定义的双引号之间的代码与函数定义的大括号之间的代码相同。

onclick="/* IN HERE */"

与

相同

elem.onclick= function(){/* IN HERE */};

该函数在浏览器评估时定义，并在点击时执行。

如果/* IN HERE */ 区域中的代码提供了任何内容，并且在元素进入 DOM 时尚未加载到 DOM 中，则单击将导致错误。

正如我所说，所有脚本块和内联处理程序都是单独评估的。所以你的点击场景如下：

<!-- same as firing the click event -->
<script type="text/javascript">
    doSomething();
</script>
<!-- externally loaded script file--late! -->
<script type="text/javascript" src="/path/to/provides_doSomething.js"></script>

【讨论】：

啊，很好的解释。谢谢！（我需要更多弹药来说服重写和/或切换到 jQuery！；）
更改为 jQuery 不会使页面加载更快，它只会向页面添加另一大块脚本，仍然必须在任何代码正确运行之前加载.将脚本从头移到脚不会使页面加载更快，它只是意味着页面更快可见（取决于脚本的大小以及是否已缓存）。如果您正在寻找“DOM 就绪”功能，您可以相当简单地实现该功能，而无需使用库。

【解决方案2】：

是的。当您单击时，即使您的 javascript 脚本正在加载，onclick 事件也会触发。它将函数调用附加到队列中，当您的脚本尚未加载时，它会导致错误。所以也许你可以在你的代码中添加一点来检查它是否加载：

<element onclick="if (doThis) {doThis();}">

【讨论】：

在那种情况下，'if' 会检查什么？...外部 JS 文件是否已经加载？（如果是这样，我认为只需将所有这些内联调用移出并在读取 dom 时附加它们。;）
它会检查是否有一个函数或任何名为 doThis 的对象。
顺便说一句，不需要大括号：onclick="if (doThis) doThis();" 就足够了。

【解决方案3】：

在 DOM 准备好之前，用户将无法点击元素。

【讨论】：

那么，这是否意味着所有 javascript 调用，无论它们是否内联，都等待整个 DOM 准备就绪（包括加载所有外部 JS 文件？）
不，绝对不是——这就是为什么我们需要像 jQuery 的 $(document).ready(...) 这样的东西。
哦，对不起，我完全误读了答案。您是说他们无法点击，因为它会引发错误，对吧？
用户可以在 DOM 准备好后立即单击它。但是元素调用的函数可能还没有准备好。
@DA：并不是说它会抛出错误——如果 DOM 没有准备好，用户怎么可能以任何方式与页面交互？