Vue第 42 篇，控制台报错：addEventListener is not a function （JavaScript添加监听事件时报错，JS添加监听事件时报错）

一. 问题

控制台报错，请看：

Uncaught TypeError:btn.addEventListener is not a function

图例：

---

二. 原因

Uncaught TypeError:btn.addEventListener is not a function

V

......不是一个函数

这是因为监听事件的事件源不对，事件源应该是一个元素，而非其它。因此，我们在获取元素时要注意，getElementsByClassName()、getElementByTagName()，获取到的是一个数组，即使满足条件的元素只有一个，也是数组形式返回，

例如：

// 这里获取元素，打印查看
const btn = document.getElementsByClassName("submitIpt");
console.log(btn)

 控制台输出：

可以看到获取、监听到的事件源是一个数组，并非元素，所以在给btn添加addEventListener()监听事件时会报错，getElementByTagName()同样。

---

三. 解决

可以写成以下这样，数组[0]，或者使用querySelector方法，就可以解决，请看

const btn = document.getElementsByClassName("submitIpt");
btn[0].addEventListener('click', function () {
  console.log("enumerable");
})


const btnTwo = document.querySelector(".submitIpt")
btnTwo.addEventListener("click", (() => {
  console.log("immediate");
}))

创作不易，感觉有用，就一键三连，感谢(●'◡'●)