未捕获的类型错误:对象#<节点列表>没有方法'addEventListener'

Uncaught TypeError: Object #<NodeList> has no method 'addEventListener'

本文关键字：列表 节点 gt 有方法 addEventListener lt 错误 类型 对象      更新时间：2024-06-27

我在一个相对简单的HTML文件中有一个按钮元素。我正在尝试添加一个事件侦听器，但不断出现错误，我不确定原因：Uncaught TypeError: Object #<NodeList> has no method 'addEventListener'

我正在尝试学习"addEventListener"方法，但我不明白我所做的事情有什么问题：

HTML:

<button>guess</button>

JS:

var myButton = document.getElementsByTagName('button');
myButton.addEventListener('click', doSomething, false);
var doSomething = function(e){
    console.log('I was clicked!');
    e.preventDefault();
    return false;
};

感谢那些提供帮助的人。

总之，对于任何其他可能遇到此问题的新手：

  1. 当使用document.getElementsByTagName()或任何其他返回NodeList的方法时，必须指定要操作的节点
  2. 请确保在声明函数之后添加事件侦听器

getElementsByTagName('button')返回一个列表，而不是一个元素。您需要将EventListener添加到该列表中的第一个元素中。

尝试：

var myButton = document.getElementsByTagName('button')[0];

getElementsByTagName()返回一个元素列表，一个nodeList，而addEventListener一次只能处理一个元素，所以迭代是一种很好的形式，这样，如果您决定拥有多个元素，就不会出错，并且您将习惯于以这种方式编写事件处理程序

var myButton = document.getElementsByTagName('button');
var doSomething = function(e){
    e.preventDefault();
    console.log('I was clicked!');
};
for (var i=myButton.length; i--;) {
    myButton[i].addEventListener('click', doSomething, false);
}

试试这个：

var myButton = document.getElementsByTagName('button')[0];
相关文章：