Question

假设你有一些HTML，

<input id="mytextbox" type="text" value="hello world" />

你想在加载后立即在该文本框上做一些魔术。无论如何，可能会在它旁边添加某种小部件或按钮。我知道有两种方法可以做到这一点。你可以在<head>

中抛出一些这样的jQuery

$(function() {
    $('#mytextbox').magic();
});

一旦整个DOM 准备就绪，它就会运行，但是如果我们想要更快的话呢？一旦元素加载了吗？

我们可以把JS放在元素之后：

<input id="mytextbox" type="text" value="hello world" />
<script>
    $('#mytextbox').magic();
</script>

但是这有点麻烦，为什么在我们确切地知道它的位置时我们必须在整个DOM中搜索元素ID？ onclick个事件有this个参数。我们有什么方法可以做这样的事情......

<input id="mytextbox" type="text" value="hello world" onload="$(this).magic()" />

？将是最好的解决方案IMO，但只有身体显然有onload事件，并且没有其他事件似乎合适。如果我们想要在加载元素后立即运行一些代码，我们是否基本上留给了解决方案＃2？

Answer 1

实际上，您的第二个代码段是“最佳”（无论是什么意思，可能最快）将一些Javascript应用于元素的方式。

<input id="mytextbox" type="text" value="hello world" />
<script type="text/html">
    $('#mytextbox').magic();
</script>

您不是在这里搜索整个 DOM 。像这样的电话会直接转到

document.getElementById('mytextbox');

或多或少，只是对节点的insta访问。无论如何，这样的做法背叛了不引人注目的Javascript的想法。我不知道为什么在DOMContentLoaded事件触发时（jQuerys .ready()抽象出来）不应用某些代码的原因。

Answer 2

由于javascript包含通常是阻止（除非你加载async ofcourse），所以最好将你的javascript尽可能地放在页面上。这样，用户在浏览页面时无需等待加载javascript。

所以这里的问题是，你真的希望它在该元素之后立即加载。或者只是在页面底部。