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

本文介绍了为什么addEventListener加载会阻止代码正常工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

更新：我最初有

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
• 使用 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() {}