为什么“加载事件在addEventListener（）上不起作用”？

Question

在加载页面的body元素后，我尝试记录一些内容，但是该日志未出现在控制台中。我究竟做错了什么？

const body = document.querySelector('body');

function setInitialGradient() {
    console.log('Cant see this message on console');
    body.style.background = `linear-gradient(to right, ${color1.value},     ${color2.value})`;
    cssProperty.textContent = body.style.background + ';';
}

body.addEventListener('load', setInitialGradient);

Answer 1

load事件是window和document的{​​{1}}的属性。您需要改用window：

body

如果要在加载正文或任何特定的html元素时使用功能，则需要使用：

window.addEventListener('load', setInitialGradient);

Answer 2

改为使用DOMContentLoaded

DOMContentLoaded事件将更早触发，通常被认为是更好的选择。

  

[加载事件]仅应用于检测已满的页面。在DOMContentLoaded更合适的地方使用负载是一个常见的错误。

将其设置在文档对象上。

document.addEventListener('DOMContentLoaded', setInitialGradient);

如果必须使用加载事件

如果必须使用load事件，则可以将侦听器添加到window：

window.addEventListener('load', setInitialGradient);

但请注意：

  

加载整个页面（包括所有相关资源，如样式表和图像）时，将触发load事件。这与DOMContentLoaded相反，后者在页面DOM被加载后立即触发，而无需等待资源完成加载。

Answer 3

window.addEventListener('DOMContentLoaded', function() { /*put your code here*/ });