Javascript 了解添加事件侦听器

请帮助我理解为什么场景1失败而场景2有效。场景2在我将鼠标放在div/idbox元素上时触发textx函数，而场景1则不是这样。我猜元素没有绑定到事件侦听器，但是为什么呢？过程是什么？先谢谢你

情景1：

 <script>

     function testx(e){  

          alert("test 123"); 
     }

     var boxTest = document.getElementById("box");

     boxTest.addEventListener("mousedown", testx, false);
     // Or this: boxTest.addEventListener("mousedown", function(e){ testx(e); }, false);

 </script>

情景2：

 <script>

    function testx(e){  

        alert("test 123"); 

    }

    function setEvent() {

        var boxTest = document.getElementById("box");
        boxTest.addEventListener("mousedown", testx, false);

    }
    window.addEventListener("load", setEvent);

 </script>

---

场景1中的问题很可能是因为脚本运行时元素不存在。在第二种情况下，脚本将等待文档完全加载，然后再尝试添加侦听器

---

要解决这个问题，请将第一个脚本元素移动到body结束标记之前，或者至少移动到box元素的结束标记之后，这样可能会起作用

对于scenario1，脚本标记是在定义div之前定义的还是之后定义的？另外，如果您在控制台中进行检查，您会发现对于scenario1，如果脚本标记是在创建div之前执行的，boxTest将为空/undefined@RobG-您应该将您的评论写入答案。我发现在场景1中，boxTest没有被分配div对象。所以问题一定出在这项任务上。只是一个观察。我仍然需要一些反思。谢谢另外，我在评论之前没有注意到你的答案，谢谢你的回复。现在我来看看你的答案。我测试了你的答案，脚本按照你说的那样工作。我的测试只是为了帮助我理解你的答案，这些答案非常符合逻辑，所以我从不怀疑它们。恰恰相反，我像往常一样感激你的帮助。我很感谢我们初学者在Stackoverflow中有这样一个平台来帮助我们学习。非常感谢你。我同样要感谢你。