DOMContentLoaded事件

Question

我正在尝试从here学习JavaScript。正如告诉here我有以下main.js文件，这将改变背景颜色，但当我点击按钮时没有发生任何事情： -

gateway_server

和index.html文件： -

java -cp iotcalcul.jar fr.iot.calcul.javaGateway

当我打开这个Firefox并点击按钮时没有任何反应请帮助我:(

Answer 1

问题是您的脚本在DOM加载之前加载，因此当您的javascript添加事件处理程序时，您的按钮不存在。由于DOM解析是同步的（它按顺序发生，一次一行），您可以通过将脚本标记添加到HTML {@ 1}}标记上方的HTML底部来解决此问题。这是相当普遍的做法。

</body>

还有一个名为<html> <head> <title>Js</title> <link rel="stylesheet" href="stylesheet.css" /> </head> <body> <button>Dont click</button> <p id="p1" > om !!!!</p> <script src="main.js"></script> </body> </html>的属性用于脚本标记，它们将完成同样的事情。它会强制脚本标记最后加载，您可以像这样使用它：

defer

Answer 2

避免此类问题的最佳方法是将事件DOMContentLoaded绑定到等待DOM完全加载和解析。

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  console.log("DOM is fully loaded and ready for DOM manipulation.");

  var btn = document.querySelector('button');

  function bgChange() {
    function random() {return '0';} // Just to illustrate!
    
    var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
    document.body.style.backgroundColor = rndCol;
  }

  btn.onclick = bgChange;
});

＆＃13;

<button>Dont click</button>
<p id="p1"> om !!!!</p>

＆＃13;

DOMContentLoaded事件

当初始HTML文档已完全加载并解析时，会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。应该仅使用非常不同的事件加载来检测完全加载的页面。使用负载是一个非常流行的错误，其中DOMContentLoaded会更合适，所以要小心。

Answer 3

为什么不

<button id="yey">Dont click</button>

和

var btn = document.getElementById("yey");

javascript onclick evnt不工作

3 个答案:

DOMContentLoaded事件