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

Question

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

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

使用 DOMContentLoaded 代替

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

[加载事件] 应该仅用于检测完全加载的页面。在 DOMContentLoaded 更合适的情况下使用 load 是一个常见的错误。

将其设置在文档对象上。

document.addEventListener('DOMContentLoaded', setInitialGradient);

如果必须使用load事件

如果必须使用该load事件，可以添加一个监听器window来代替：

window.addEventListener('load', setInitialGradient);

但请注意：

当整个页面（包括所有依赖资源，例如样式表和图像）加载时，将触发 load 事件。这与 DOMContentLoaded 形成对比，DOMContentLoaded 在页面 DOM 加载后立即触发，无需等待资源完成加载。