Question

单击页脚链接后尝试创建要触发的事件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我收到＆＃34; Uncaught TypeError的错误：footer_link.addEventListener不是函数＆＃34;。如果取出eventListener，控制台将从标记中记录正确的li。或者，如果从addEventListener中删除元素选择器，则只要按预期单击页面，它就会触发。选择元素我做错了什么？

Answer 1

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

如果您只想要第一个，则需要[0]访问它。也就是说，通过索引器访问它。 NodeLists被索引（如数组），因此[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>

Answer 2

那是因为＆＃39; getElementByClassName＆＃39;返回一个数组，因此您需要选择数组的第一个元素。尝试使用footer_link[0]

＆＃13;

var hooray = function(event) {
  console.log("hooray");
};

var footer_link = document.getElementsByClassName('footer-link');
console.log(footer_link);
footer_link[0].addEventListener('click', hooray, false);

＆＃13;

<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>

＆＃13;

EventListener不是一个函数

2 个答案: