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

Update:我原本有

document.addEventListener("DOMContentLoaded"...

and链接到 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”，但不是。使用“load”会产生相同的结果：非工作代码。

大谜团！

这是我最初实际拥有的代码片段：

(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);

})();

<div class="group state">
<label for="s-state">State (required):</label>
<select id="s-state" required>
                            <option value="">- select -</option>
                            <option value="CA">California</option>
                            <option value="IL">Illinois</option>
                            <option value="NH">New Hampshire</option>
                            <option value="PA">Pennsylvania</option>
</select>
</div>


<p>
<label for="btn-estimate">Click to estimate:</label>
<br>
<input type="submit" value="Estimate Total" id="btn-estimate">
</p>

使用本机 JavaScript 解决此问题的 3 种可能方法：

• using window.addEventListener代替document.addEventListener
• using DOMContentLoaded像这样document.addEventListener("DOMContentLoaded", function(event) {});
• using window.onload = function() {}