我正在尝试在加载文档时将输出打印到控制台 . 以下是我写的代码 . 但是没有显示输出 .

var div = document.querySelector('#red');
        document.addEventListener('DOMContentLoaded',function (){
        console.log('event triggered...');
        });

使用以下代码时输出正确显示 . 你能解释一下这种行为的原因吗？

var div = document.querySelector('#red');

window.addEventListener('load',function (){
console.log('event triggered...');
});

我简单的HTML：

<html>
    <head>
        <title>enlitle</title>
    <link href='styleSheet.css' type='text/css' rel='stylesheet' id='linkElement' /> 

    <script async type='text/javascript' src='scripts.js'></script>
    </head>

    <body>
    <div id='blue'>
            <div id='red'>
            </div>
    </div>
 </body>
</html>
javascript dom event-handling addeventlistener domcontentloaded