浏览器加载JavaScript但无代码执行 load事件console.log无输出问题

script.js #

document.addEventListener('load', () => {
    console.log('hi')}
)

style.css #

h1, h2{
    color:white;
    text-align: center;
    font-weight: 300;
}
body{
    background-color: rgb(24, 24, 24);
    overflow-x :hidden;
}

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel = "stylesheet" href = "style.css">
    <script src = "script.js"></script>
    <title>Test</title>
</head>
<body>
        <h1 style="font-size: 50px;" id = "hi">Hi</h1>
</body>
</html>

注：以上并非完整业务代码，仅为用于复现问题的占位示例内容

JavaScript文件可被浏览器正常加载，但代码未按预期执行，load事件回调内的console.log('hi')始终不会在控制台输出。

• 核心问题是事件绑定的目标对象错误：load事件本身不支持冒泡，只会在window对象上触发，直接给document对象绑定load事件监听，对应的回调永远不会被触发。
• 对应修正方法：如果要监听页面所有资源（包括图片、样式表、iframe等外部资源）全部加载完成，需要把事件监听绑定到window对象上：

window.addEventListener('load', () => {
    console.log('hi')
})

• 如果不需要等待图片等外部资源加载，只需要DOM结构解析完成就执行逻辑，可以直接监听document上的DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', () => {
    console.log('hi')
})

内容的提问来源于stack exchange，提问作者jkimishere