Question

我通常使用jQuery，因为使用文档就绪功能很方便，所以我可以等到DOM准备就绪，然后才能将事件监听器附加到DOM元素。

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

<element onclick="doThis()">

不漂亮，但我需要合作。

通常我会在HTML页面的底部加载JS文件。但是，如果我在这种情况下这样做，事件是否等到文档准备好（正文加载）以尝试执行，或者只要单击元素就会触发onclick事件，无论是否有大的JS文件载满了吗？

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

Answer 1

HTML元素上的事件处理属性就像一个迷你脚本块，它独立于页面上的其他脚本块进行评估。在onclick =“”的情况下，只要元素被读入DOM，就会评估事件处理程序属性，并在单击该元素时尝试运行。

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

onclick="/* IN HERE */"

与

相同

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

该功能在浏览器评估时定义，并在点击后执行。

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

正如我所说，所有脚本块和内联处理程序都是单独评估的。因此，您点击的方案如下：

<!-- 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>

Answer 2

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

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

Answer 3

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

JavaScript内联事件监听器......他们等待JS加载吗？

3 个答案: