类型错误：无法读取 undefined

Question

有两个 <input type="text"> 表单元素和一个 button，而不是我尝试通过 .forEach() 附加事件处理程序。尝试访问每个元素时，会引发以下错误：

• Uncaught TypeError: Cannot read property '#<HTMLInputElement>' of undefined

但是，如果我将事件处理程序单独硬编码到这些元素中的每一个，则不会引发主题错误。发生这种情况的原因是什么？

JS

失败

const login_container = document.querySelector(".login_form_container");
const username_field = document.getElementById("id_login_username");
const password_field = document.getElementById("id_login_password");
const post_login = document.getElementById("post_login");

login_container.addEventListener("mouseout", function(event) {
  this.classList.add("shift");
})

[post_login, username_field, password_field].forEach((widget) => {
    widget.addEventListener("mouseover", function(event) {
      login_container.classList.remove("shift");
    })
})

通过

post_login.addEventListener("mouseover", function(event) {
    login_container.classList.remove("shift");
})

username_field.addEventListener("mouseover", function(event) {
    login_container.classList.remove("shift");
})

password_field.addEventListener("mouseover", function(event) {
    login_container.classList.remove("shift");
})

HTML

    <div class="login_form_container shift slide">
      <form class="login_form">
      {% for field in login_form %}
        {{ field }}
      {% endfor %}
        <button id="post_login" class="login_button" type="button">Access</button>
      </form>
    </div>

Answer 1

JSFiddle 显示一条警告，说明正在发生的事情。

在 .addEventListener 调用后没有任何分号，这意味着 JavaScript 解析器将数组文字解释为 addEventListener 结果的索引运算符。

并且由于 post_login 不是 undefined（返回值）的有效索引，因此它会抛出一个 TypeError。

login_container.addEventListener(...)[post_login, ...].forEach(...)

您可以通过在每次调用后简单地添加分号来修复它。