Javascript 为什么addEventListener负载会阻止代码工作？

更新： 我本来有

document.addEventListener("DOMContentLoaded"...

和链接到HTML文档头部的JS文件

结果是：另一个js脚本的某些部分无法工作

然后我将“DOMContentLoaded”替换为“load”，它开始工作了

现在奇怪的是：

当我将JS文件的链接移动到HTML文档的页脚时，它实际上只能与“DOMContentLoaded”一起工作。 但这很奇怪，不是吗

我不知道发生了什么事！有什么建议吗

原职：

我正试图解开一个大谜团。 虽然此代码工作正常：

(function () {
    "use strict";

    var state = document.getElementById("s-state");
    var btnEstimate = document.getElementById("btn-estimate");

// document.addEventListener("load", function() {

        btnEstimate.setAttribute("disabled", "disabled");
        btnEstimate.value = "Please select your state first!";

        state.addEventListener("change", function () {
            if (state.value === "") {
                btnEstimate.setAttribute("disabled", "disabled");
                btnEstimate.value = "Please select your state first!";
            } else {
                btnEstimate.removeAttribute("disabled");
                btnEstimate.value = "Estimate Total";
            }
        });

// }, false);

})();

以下代码不起作用：

(function () {
    "use strict";

    var state = document.getElementById("s-state");
    var btnEstimate = document.getElementById("btn-estimate");

    document.addEventListener("load", function() {

        btnEstimate.setAttribute("disabled", "disabled");
        btnEstimate.value = "Please select your state first!";

        state.addEventListener("change", function () {
            if (state.value === "") {
                btnEstimate.setAttribute("disabled", "disabled");
                btnEstimate.value = "Please select your state first!";
            } else {
                btnEstimate.removeAttribute("disabled");
                btnEstimate.value = "Estimate Total";
            }
        });

    }, false);

})();

所以，最大的问题是为什么？？？ 为什么要用以下方式包装代码：

document.addEventListener("load", function() {
    }, false);

阻止它工作？ 那没有任何意义，是吗？ 首先，我认为问题在于我使用了“DOMContentLoaded”，但没有。使用“加载”会产生相同的结果：非工作代码

大秘密

下面是我最初使用的代码片段：

（函数（）{
“严格使用”；
var状态=document.getElementById（“s状态”）；
var btnEstimate=document.getElementById（“btn估算”）；
document.addEventListener（“加载”，函数（）{
setAttribute（“禁用”、“禁用”）；
btnEstimate.value=“请先选择您的状态！”；
state.addEventListener（“更改”，函数（）{
如果（state.value==“”）{
setAttribute（“禁用”、“禁用”）；
btnEstimate.value=“请先选择您的状态！”；
}否则{
btnEstimate.removeAttribute（“禁用”）；
btnEstimate.value=“估计总数”；
}
});
}，假）；
})();

说明（必需）：
-挑选-
加利福尼亚
伊利诺伊州
新罕布什尔州
宾夕法尼亚

点击估算：


因为没有调用document.onload？可以使用window.onload，或者如果您有jQuery，则使用jQuery（document）.ready（function（）{…}）
您要查找的事件是
“domcontentload”
，而不是
“load”


document.addEventListener（'DOMContentLoaded'，函数（）{
console.log（'loaded'）
})
使用本机javascript解决此问题的3种可能方法：


使用
窗口。addEventListener
代替
文档。addEventListener
像这样使用
document.addEventListener（“DOMContentLoaded”，函数（事件）{}）

使用
window.onload=function（）{}
阅读MDN中有关此
useCapture
选项的内容会有所帮助：

useCapture可选一个布尔值，指示此类型的事件将
在发送到之前发送到注册的侦听器
DOM树中它下面的任何EventTarget。正在冒泡的事件
向上遍历树不会触发指定使用的侦听器
捕获。事件冒泡和捕获是传播的两种方式
发生在嵌套在另一个元素中的元素中的事件
元素，当两个元素都为该事件注册了句柄时。
事件传播模式确定元素的顺序
接收事件。请参阅DOM级别3事件和JavaScript事件顺序
请详细解释。如果未指定，则useCapture默认为
错

另外，阅读这篇关于事件传播方向性的文章也会有所帮助：

捕获阶段：事件被分派到目标的祖先
从树的根节点到目标节点的直接父节点

目标阶段：事件被调度到目标节点

冒泡阶段：事件将从
将目标节点的父节点直接指向树的根节点

useCapture
指示活动行程将在哪个阶段进行：

如果true，则useCapture表示用户希望添加事件
仅用于捕获阶段的侦听器，即此事件侦听器不会
在目标和冒泡阶段触发

如果false，则事件侦听器将仅在目标和冒泡阶段触发

我不确定这与您的代码有什么关系，但这将说明它在
load
事件中无法正常工作的原因

我想这是因为
文档
是根节点，所以它没有父节点。
Mate，我当然首先尝试了DOMContentLoaded！没用！“DOMContentLoaded”事件应该可以工作。你能发布你的代码版本吗？可能还有其他原因导致了问题。是的，我有上面的片段。最奇怪的是：当我将js文件的链接放在HTML文档的页脚中时，只有“DOMContentLoaded”才真正起作用！但是当我把js文件的链接移到头部时，它就停止工作了！为什么？？？如果将
元素放在主体的末尾，则无需等待加载事件，因为脚本将在主体解析后运行。但奇怪的是，“DOMContentLoaded”应该仍然可以在
中使用。如果你想得到调试的帮助，你必须发布你的代码。是的，这太奇怪了！还有一个大谜团！我在代码片段中发布了确切的代码（包括HTML）。现在唯一的区别是我用“DOMContentLoaded”替换了“load”。我实际上使用的是一个立即调用的函数表达式（请参阅更新的代码）。这应该会成功的，对吧？但它没有！这是世界上最奇怪的事情：我首先在