未捕获的TypeError:ele.addEventListener不是函数

Question

我有一个问题，请指导我代码中的问题或错误在哪里。下面是我的html和JavaScript代码。当我在visualstudio代码编辑器中运行此代码时，代码会完美运行，但当我在在线网站中使用此代码时会显示错误"；Uncaught TypeError:ele.addEventListener不是函数；。

**<input type="text" name="" id="mon" class="key" placeholder="Monday">
<input type="text" name="" id="tues" class="key" placeholder="Tuesday">
<script>
var ele = document.querySelectorAll("#mon, #tues");
ele.addEventListener('keypress', demo);
function demo(){
alert();
}
</script>**

Answer 1

由于ele是NodeList数组，因此您已将addEvenListener附加到每个节点。

<input type="text" name="" id="mon" class="key" placeholder="Monday">
<input type="text" name="" id="tues" class="key" placeholder="Tuesday">
<script>
var ele = document.querySelectorAll("#mon, #tues");
for (let i = 0; i < ele.length; i++) {
ele[i].addEventListener("click", demo);
}

function demo(){
alert();
}
</script>

Answer 2

document.querySelectorAll返回元素列表，而不是单个元素。因此，ele是一个数组，不可能直接向数组中添加eventListener。

如果希望为el数组中的所有元素添加相同的eventListener，则需要迭代其元素，并为每个元素添加侦听器，如下所示：

for(var el of ele){
el.addEventListener('keypress', function(){
alert();
});
}