javascript - 事件监听器不是一个函数

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 7 年前。

尝试创建一个事件，以便在单击页脚链接后触发。

var hooray = function(event) {
  console.log("hooray");
};

var footer_link = document.getElementsByClassName('footer-link');
console.log(footer_link);
footer_link.addEventListener('click', hooray, false);

<li class="footer-link">Title link
  <ul class="footer-link-sub">
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</li>

我收到错误“Uncaught TypeError: footer_link.addEventListener is not a function”。如果取出 eventListener，控制台将从标记中记录正确的 li。或者，如果从 addEventListener 中删除元素选择器，则只要按预期单击页面，它就会触发。我选择元素时做错了什么？

Answer 1

getElementsByClassName 返回一个 NodeList - 即包含多个元素的列表。

如果您只想要第一个，则需要通过[0]访问它。即通过索引器访问它。 NodeList 是有索引的(如数组)，因此 [0] 返回第一个元素，[1] 返回第二个元素，依此类推 - 您的情况下只有一个元素。

var hooray = function(event) {
  alert("hooray");
};

var footer_link = document.getElementsByClassName('footer-link');
console.log(footer_link);
// Note the [0] here
footer_link[0].addEventListener('click', hooray, false);

<li class="footer-link">Title link
  <ul class="footer-link-sub">
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</li>