未捕获的类型错误：对象 #<NodeList> 没有方法“addEventListener”

Question

我在一个相对简单的 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. 确保在声明函数之后添加事件监听器。

Answer 1

试试这个：

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

Answer 2

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);
}

Answer 3

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

试试：

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