类型错误：addEventListener 不是 JavaScript 中的函数

作者

TypeError: addEventListener 不是 JavaScript 中的函数

TypeError: addEventListener is not a function in JavaScript

出现“TypeError: addEventListener is not a function”错误的原因有多种：

  • 在不是有效 DOM 元素的对象上调用方法。
  • 将 JS 脚本标记放在声明 DOM 元素的代码上方。
  • 方法拼写错误addEventListener（区分大小写）。

addeventlistener 不是函数

下面是错误如何发生的示例。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const boxes = document.getElementsByClassName('box');

console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ⛔️ TypeError: boxes.addEventListener is not a function
boxes.addEventListener('click', function onClick() {
  console.log('box clicked');
});

我们收到错误是因为我们

对该方法返回的类数组对象调用了addEventListenergetElementsByClassName方法。

请注意，在我们的HTML文件中，我们将index.js脚本放在标记的底部body，在 DOM 元素之后。

这很重要，因为如果您在创建 DOM 元素之前运行脚本，则您的 JS 代码将无法访问它们。

要解决“addEventListener 不是函数”错误，请确保
addEventListener()在有效的 DOM 元素或document或
对象上调用该方法，并将 JS 脚本标记放在HTML 标记的window底部。body

索引.js
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ✅ addEventListener to first box
boxes[0].addEventListener('click', function onClick() {
  console.log('box clicked');
});

// ✅ addEventListener to all boxes
for (const box of boxes) {
  box.addEventListener('click', function onClick() {
    console.log('box clicked');
  });
}

第一个示例调用addEventListener类数组对象中第一个元素的方法。

第二个示例演示如何迭代元素div以向每个元素添加事件侦听器。

如果错误仍然存​​在，请确保您没有拼写错误。 addEventListener

您还可以console.log调用要调用方法的元素。

确保您addEventListener在有效的 DOM 元素或Document或Window对象上调用该方法。

调用前检查元素是否存在addEventListener

如果您调用该方法的元素有时不存在，请

在调用该方法之前有条件地检查该元素是否存在addEventListener。

例如，一个基本的 DOM 元素有一个对象类型，所以我们可以addEventListener在调用方法之前检查该值是否是一个对象并包含该属性。

索引.js
const box = null;

if (typeof box === 'object' && box !== null && 'addEventListener' in box) {
  box.addEventListener('click', function onClick() {
    console.log('box clicked');
  });
}

我们的if条件使用逻辑与 (&&) 运算符。要if运行块，必须满足所有条件。

我们首先检查box变量
是否存储了类型为 的值object，因为 DOM 元素的类型为object。

然后我们
检查变量是否不等于 null。null不幸的是，如果你检查with的类型console.log(typeof null)，你会得到一个"object"值，所以我们必须确保该值不是
null。

索引.js
console.log(typeof null); // 👉️ object
我们检查的最后一件事是对象包含属性。 addEventListener

然后我们知道我们可以安全地调用addEventListener对象上的方法。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：