为什么必须将我的jquery函数用于按钮单击事件放在$（document）.ready（）中？

Question

考虑以下html。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
        <button id="mybutton" type="button">submit</button>
    </body>
</html>

...当我尝试通过以下方式在test.js中为按钮的click事件实现jQuery事件处理程序时...

$("#mybutton").on("click", function (event) {
    alert("clicked");
});

... 这是行不通的。 但是，如果我用准备好的文档包装功能，如...

$(document).ready(function () {
    $("#mybutton").on("click", function (event) {
        alert("clicked");
    });
});

... 有用。 这是为什么？ 是否所有事件处理程序都应放置在文档中了？ 寻找一致的方法。

我希望在可能的地方使用jQuery。 我很难理解jQuery的功能范围。 我看到有些情况下，人们主张将脚本定义放在html <head> ，而其他人则说过将其放在正文的底部以更好地确定范围，但是我显然很难理解为什么。

Answer 1

这是因为您的JavaScript可能在内容显示在页面上之前就已在运行。 例如，如果脚本位于头部，这是很常见的。 通过将其放置在就绪的处理程序中，可以确保实际上选择元素。 如果此操作在存在元素之前运行，则将单击处理程序附加到按钮的空列表中。

$("#mybutton").on("click", function (event) {
  alert("clicked");
});

Answer 2

因为浏览器自上而下读取JavaScript文件，并且在加载HTML文件之前先读取了脚本。

您的脚本在头。 最佳做法是将您的脚本放在正文的底部。 这样做的原因是，因为脚本位于头部，所以脚本将在HTML文档加载之前加载。 这很不好，原因有两个：

1. 当脚本运行以添加事件侦听器时，该按钮不存在，因此当按钮加载时，它不执行任何操作

2. 如果您有大量的JavaScript文件，则会带来糟糕的用户体验。 在加载HTML内容之前，将迫使用户等待脚本加载。

如果将JavaScript文件放在页面底部，则页面将被加载，并且用户至少可以开始与页面进行交互，并且所有DOM元素都将被加载，并且JavaScript可以正常工作。

另外，您可以使用$(document).ready()在文档加载后触发一个事件。 这样可以防止在文件加载之前触发javascript。 因此，在脚本运行时，会有一个按钮，事件侦听器成功连接到该按钮，脚本便可以工作。

简而言之， $(document).ready()确保在脚本运行之前已加载html文档，并将<script>标记置于页面底部，还确保html文件在脚本运行之前已加载。