Question

更新我最初有

document.addEventListener("DOMContentLoaded"...

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

结果是：另一个js脚本的某些部分无效。

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

现在奇怪的是：

当我将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'而不是nope。使用'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

使用原生javascript解决此问题的3种可能方法：

使用window.addEventListener

document.addEventListener

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

Answer 2

您正在寻找的事件是"DOMContentLoaded"，而不是"load"

＆＃13;

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

＆＃13;

Answer 3

因为没有调用document.onload？可以使用window.onload，或者如果你有jQuery，使用jQuery（document）.ready（function（）{...}）

Answer 4

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

useCapture 可选一个布尔值，表示此类型的事件将会在被派遣之前被派遣到注册的听众 DOM树下面的任何EventTarget。冒泡的事件向上穿过树不会触发指定使用的监听器捕获。事件冒泡和捕获是两种传播方式在嵌套在另一个元素中的元素中发生的事件 element，当两个元素都已注册该事件的句柄时。事件传播模式确定元素的顺序收到活动。请参阅DOM Level 3事件和JavaScript事件顺序详细解释。如果未指定，则useCapture默认为假的。

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

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

目标阶段：将事件分派到目标节点。

冒泡阶段：将事件发送给目标的祖先   目标节点的直接父节点到树的根目录。

useCapture表示活动旅行将在哪个阶段进行：

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

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

我不确定这与您的代码有何关联，但这表明它为load事件无法正常工作。

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

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

4 个答案: