Question

我的网站基本上是一个很长的页面，在加载页面之前我想单击一个元素（因为它很长，所以需要一段时间），但是我无法触发它。

为了测试可能导致问题的原因，我制作了一个非常基本的按钮，该按钮在单击时写入控制台，在加载阶段它什么也没做，然后在所有内容完全加载后才起作用。

奇怪的部分是查找了可能的解决方案，所以这个问题人们一致表示javascript在代码中所写的任何行加载，而指向.js文件的链接是（紧随在）因此肯定应该立即加载。

这显然不是完整的代码，因为站点很长，但是这里是相关的部分：

    "use strict";
    
    function test() {
    	console.log("testingtesting");
    }
    
    function init() {
        document.getElementById("buttonName").onclick = test;
    }
    
    window.onload = init;

    <head>
	   <title>Title</title>
	   <script src="script.js"></script>
    </head>

    <body>
       <button id="buttonName">
    </body>

有人能解释为什么它的状态如何吗？如果有什么我可以做的改变呢？

Answer 1

使用按钮时，可以使用此方法。

"use strict";
    
    function test() {
    	console.log("testingtesting");
    }

<head>
	   <title>Title</title>
	   <script src="script.js"></script>
    </head>

    <body>
       <button id="buttonName" onclick="test()"/>
    </body>

如果您希望在加载该函数后立即启动该函数，则可以尝试使用自调用函数。

(function () {
  // body of the function
}());

Answer 2

代码！

$(document).ready(function() {
  test();
  
  $("#buttonName").click(function() {
    test();
  });
  
  function test() {
    console.log("testtest");
  }
});

button {
  height: 80px;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="buttonName">

它如何工作。

您提出的问题很有趣。我用过jQuery。 javascript库，可以使大多数功能更加容易。

首先。脚本的位置实际上并不重要。如果需要重要并在一开始就重新运行它，有些人会把它放在头上。

但是，大多数情况下，您可以将JavaScript放在结束body标签之前。这是Google对于SEO所认可的。

$(document).ready(function()页面准备就绪后，将在此处调用此函数。还是呢？您会惊讶地发现，事实上，在页面完全加载之前，您很难停止脚本的加载。：）

当浏览器在解析HTML时遇到脚本标记时，它将停止解析并开始在javascript解释器上工作，然后该javascript解释器最终运行该脚本。直到脚本执行完成后，HTML才会继续运行，以防万一您在某处具有“ document.ready”功能。这是默认行为。

编写完其余部分后，请假设您已经了解其余代码的作用。

onclick需要单独的功能。但是正如我所说，脚本将在页面完全加载之前加载。因此，您可以先进行onclick的工作。但是，由于button尚未加载，因此您无需单击任何内容。

另一种解决问题的方法。

    function test() {
    	console.log("testingtesting");
    }

button {
  height: 80px;
  width: 80px;
}

<button id="buttonName" onclick="test()"/>

与脚本document.getElementById("buttonName").onclick = test;不同，此函数在DOM <button id="buttonName" onclick="test()"/>中被调用因此，onclick不需要另外一行。

进一步阅读

https://api.jquery.com/

https://www.innoq.com/en/blog/loading-javascript/

http://www.bardev.com/2013/01/03/browser-script-loading/

页面完全加载前如何触发onclick

2 个答案: