为什么addEventListener加载会阻止代码正常工作？ [英] Why is addEventListener load preventing code from working?

问题描述

更新：我最初有

Update: I originally had

document.addEventListener("DOMContentLoaded"...

并且正在链接到开头的JS文件

and was linking to the JS file in the head of the HTML document.

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

The result was: some parts of another js script weren't working.

I

现在奇怪的是：

当我将JS文件的链接移动到HTML文档的页脚时，然后才可以与 DOMContentLoaded一起使用。
但这很奇怪吗？

When I move the link to the JS file to the footer of the HTML document, then and only then it actually works with 'DOMContentLoaded'. But that's very weird isn't it?

我不知道这是怎么回事！有指针吗？

I have no idea what's going on! Any pointers?

原始帖子：

我想揭开一个大谜团。
这段代码运行正常时：

There is a big mystery I'm trying to unravel. While this code is working perfectly:

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

})();

所以，最大的问题是为什么？？？
为什么在其中包装代码：

So, the big question is WHY??? Why is wrapping the code around in this:

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

阻止它工作吗？
没有任何意义，对吗？
首先，我认为问题出在我使用的是 DOMContentLoaded，但不是。使用加载会产生相同的结果：无效代码。

prevent it from working? That doesn't make any sense, does it? First, I thought the problem was me using 'DOMContentLoaded' but nope. Using 'load' produces the same result: non-working code.

大谜团！

以下是我原来的代码片段：

Here's the snippet with the code I actually had originally:

(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种可能方法：

3 possible ways to resolve this issue using native javascript:

• 使用 document.addEventListener window.addEventListener >
  
• 使用 DOMContentLoaded 这样的 document.addEventListener（ DOMContentLoaded，function（event）{}）;


• 使用 window.onload = function（）{}

• using window.addEventListener insted of document.addEventListener
• using DOMContentLoaded like this document.addEventListener("DOMContentLoaded", function(event) {});
• using window.onload = function() {}

这篇关于为什么addEventListener加载会阻止代码正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！