将javascript放在HTML中

Question

我有两个关于将JS放在HTML中的问题。我无法找到这两点的答案here。

问题基本上是

• 假设我把Javascript放在头脑中，并说脚本试图通过ID获取一些HTML元素，并为它注册一个点击处理程序。既然如此，HTML尚未加载（因为脚本是在头部调用的），这会起作用吗？
• 另一方面，如果在加载DOM时调用头中的函数，并且在该函数内部我放置了用于点击某个按钮的处理程序的代码，那么据我所知用户有机会点击按钮但是处理程序将不会被调用，因为尚未加载整个DOM（这是按钮单击处理程序注册的位置）。我是对的吗？

考虑到以上两点，将Javascript置于HTML中的解决方案和最佳方法是什么？

Answer 1

  

让我们说我把Javascript放在头脑中，并说脚本试图   按ID获取一些HTML元素，并为其注册一个单击处理程序。现在   因为，尚未加载HTML（因为脚本被调用   在头部），这会有效吗？

不，这不会奏效。只要看到<script>标记，就会在进一步使用DOM构建之前立即执行javascript。 （如果javascript是外部的，它将等待通过网络获取它并执行它）如果javascript使用像getElementById这样的DOM API，它将对DOM的当前快照起作用。当脚本试图通过id获取元素时，它会尝试从DOM（所有DOM API作用于DOM）获取它，这是正在构建的。由于元素尚未添加到DOM（我们是处理头），因此无法获得元素。由于它无法获取元素，因此如果您尝试访问addEventListener的{​​{1}}或onclick，则会产生错误。

  

另一方面，如果在头部注册被调用的函数   当加载DOM时，在该函数内部我将代码放入其中   注册处理程序单击某个按钮，然后据我了解用户   有机会单击按钮但不会调用处理程序，因为   整个DOM尚未加载（这是按钮单击的位置   处理程序已注册）。我是对的吗？

是的，你是对的。 DOM加载概括了所有元素都添加到DOM并准备好对HTML定义的任何元素进行任何操作的条件。

此外，只有在加载DOM并且还加载了图像，视频等所有外部资源后，才会触发null。使用它可以进一步延迟事件附件。

如果我想立即添加事件监听器怎么办？

如果你想立即绑定一个事件，你可以使用内联脚本，就在元素之后，虽然通常不是一个要求，也不是一个好的做法。

window.load

这也开启了另一种可能性，如果您将脚本放在HTML的末尾而不是head，它确保将所有元素添加到DOM，并且DOM几乎可以用于使用DOM API的任何操作。当听取DOM加载事件并不那么容易时，这被广泛使用。虽然我找不到正确的参考资料，但这是Doug Crockford的推荐。