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

Question

更新:我本来就有

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”，但不是。使用“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>

Answer 1

使用 native JavaScript 解决此问题的 3 种可能方法:

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