EventListener不是函数

尝试创建一个事件以在点击页脚链接后触发。EventListener不是函数

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>

我得到一个错误 “遗漏的类型错误：footer_link.addEventListener不是一个函数”。如果eventListener被取出，则控制台将从标记中记录正确的li。或者，如果从addEventListener中删除元素选择器，则只要按预期方式单击页面，它就会触发。我在做什么错选择元素？

来源

2015-07-12 Mark

见http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return。 – 2015-07-12 19:47:04

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>

来源

2015-07-12 19:29:02

这是因为“getElementByClassName”返回一个数组，所以你需要选择数组的第一个元素。尝试使用footer_link[0]

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

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

来源

2015-07-12 19:34:05

EventListener不是函数

回答

相关问题