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

Question

更新： 我本来有

document.addEventListener("DOMContentLoaded"...

和 linking 到 HTML 文档头部的 JS 文件。

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

然后我用 'load' 替换了 'DOMContentLoaded' 并且它开始工作了！

现在奇怪的是：

当我将 link 移动到 JS 文件到 HTML 文档的页脚时，然后它才真正与 'DOMContentLoaded' 一起工作。但这很奇怪不是吗？

我不知道发生了什么！任何指针？

原文post：

我正试图解开一个大谜团。虽然此代码运行良好：

(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

因为 document.onload 没有被调用？可以使用 window.onload，或者如果您有 jQuery，请使用 jQuery(document).ready(function(){...})

Answer 2

您要查找的活动是 "DOMContentLoaded"，而不是 "load"

document.addEventListener('DOMContentLoaded', function () {
  console.log('loaded')
})

Answer 3

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

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

Answer 4

阅读有关此 useCapture 选项的 MDN 将很有帮助：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

useCapture Optional A Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events which occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false.

阅读这篇关于事件传播的方向性的文章 post 会更有帮助：Unable to understand useCapture attribute in addEventListener

The capture phase: the event is dispatched to the target's ancestors from the root of the tree to the direct parent of the target node.

The target phase: the event is dispatched to the target node.

The bubbling phase: the event is dispatched to the target's ancestors from the direct parent of the target node to the root of the tree.

useCapture 表示活动旅行将进行的阶段：

If true, useCapture indicates that the user wishes to add the event listener for the capture phase only, i.e. this event listener will not be triggered during the target and bubbling phases.

If false, the event listener will only be triggered during the target and bubbling phases.

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

我想是因为document是根节点，所以它没有父节点。

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

Why is addEventListener load preventing code from working?

javascript

load

addeventlistener