javascript - 将 javascript 放入 HTML 中

Question

我有两个关于在 HTML 中放置 JS 的问题。找不到这两点的答案here .

问题基本上都是

• 假设我将 Javascript 放在头部，并假设该脚本尝试通过 ID 获取一些 HTML 元素，并为其注册一个点击处理程序。现在，HTML 尚未加载(因为在 head 中调用了脚本)，这可以工作吗？
• 另一方面，如果在 head 中注册一个在加载 DOM 时调用的函数，并且在该函数中我放入了注册处理程序以单击某个按钮的代码，那么据我所知用户有机会单击按钮但是处理程序将不会被调用，因为整个 DOM 还没有加载(这是按钮点击处理程序注册的地方)。我说得对吗？

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

Answer 1

Let's say I put Javascript in the head, and say the script tries to get some HTML element by ID, and register a click handler for it. Now since, the HTML has not been loaded yet (because the script is called in head), will this work?

不，这行不通。每当<script>看到标签，在进一步构建 DOM 之前立即执行 javascript。 (如果 javascript 是外部的，它将等待通过网络获取它并执行它)如果 javascript 使用像 getElementById 这样的 DOM API，它将对 DOM 的当前快照起作用。 .当脚本尝试通过 id 获取元素时，它会尝试从正在构建的 DOM(所有 DOM API 都作用于 DOM)中获取它。由于该元素尚未添加到 DOM(我们正在处理 head)，因此它无法获取该元素。由于它无法获取元素，因此如果您尝试访问 addEventListener，它将抛出错误。或 onclick的 null .

On the other hand, if register a function in head which gets called when DOM is loaded, and inside that function I put code which registers handler for click on some button, then as I understand user has chance to click button but the handler will not be called because the whole DOM was not loaded yet (and that is where the button click handler is registered). Am I correct?

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

此外，window.load只有在加载 DOM 并且加载所有外部资源(如图像、视频)后才会触发。使用它可以进一步延迟事件附件。

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

如果你想立即绑定(bind)一个事件，你可以使用内联脚本来完成，就在元素之后，虽然通常不是必需的，也不是一个好的做法。

<p>whatever</p>
<button id="mybutton">Click me</button>
<script>
     document.getElementById('mybutton').addEventListener(...
</script>
<p>rest of HTML</p>

这也开启了另一种可能性，如果您将脚本放在 HTML 的末尾而不是头部，它可以确保所有元素都添加到 DOM 中，并且 DOM 实际上已准备好使用 DOM API 进行任何操作。当监听 DOM 加载事件不是那么容易时，这被广泛使用。虽然我找不到正确的引用，但这是 Doug Crockford 的推荐。