addEventListener 不是函数[重复]答案

【问题标题】：addEventListener is not a function [duplicate]addEventListener 不是函数[重复]
【发布时间】：2015-11-16 01:41:38
【问题描述】：

嗨，我正在尝试使用关闭单击关闭 div。这是代码

var closeIcon=document.getElementsByClassName('.monique-close-icon');  

    function closeBigImgAndContainer()
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

closeIcon.addEventListener("click", closeBigImgAndContainer);

但是在控制台有一个错误 未捕获的类型错误：closeIcon.addEventListener 不是函数（匿名函数）@main.js:14 请告诉我哪里做错了...谢谢。

【问题讨论】：

查看this fiddle以获得您正在尝试做的工作示例。 jsfiddle.net/vhe17shd

标签： javascript

【解决方案1】：

getElementsByClassName 返回一个元素数组，addEventListener 存在于元素上。

解决方法是从 getElementsByClassName 遍历结果集并在每个项目上调用 addEventListener：

var closeIcons=document.getElementsByClassName('.monique-close-icon');  

function closeBigImgAndContainer()
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

for (i = 0; i < closeIcons.length; i++) {
    closeIcons[i].addEventListener("click", closeBigImgAndContainer);
}

【讨论】：

除了你的答案，选择器也错了。
@Syadani 我添加了 id 并且它起作用了。谢谢。，
从技术上讲，它返回一个集合，类似于数组。

【解决方案2】：

看起来closeIcon 变量的值未定义。
这是因为getElementsByClassName(..) 方法将class 名称作为其参数。

您可以尝试如下修复：

var closeIcons = document.getElementsByClassName('monique-close-icon');
var i = closeIcons.length;
while (i--)
  closeIcons[i].addEventListener("click", closeBigImgAndContainer);

同样getElementsByClassName(..) 方法返回节点集合，而不是单个元素。要分配事件监听器，我们需要循环该集合并将事件分配给其中的每个 DOM 元素。

【讨论】：

选择器错误是对的，但问题是您不能在元素集合上调用 addEventListener。
如果他想将事件处理程序附加到所有元素怎么办？
我相信他试图用一种方法向所有元素添加相同的事件侦听器，这是不可能的，因为该集合没有具有该名称的方法。

【解决方案3】：

首先，您的选择器错误。它应该是这样的：

var closeIcon = document.getElementsByClassName('monique-close-icon');

然后您需要附加事件处理程序，就好像您在处理一个数组一样，因为 .getElementsByClassName() 方法返回一个元素集合。

var closeIcon = document.getElementsByClassName('monique-close-icon'); 
function closeBigImgAndContainer(e)
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

for (var i = 0; i < closeIcon.length; i++) {
   closeIcon[i].addEventListener('click', closeBigImgAndContainer); 
}

这是一个工作示例： http://jsfiddle.net/vhe17shd/

【讨论】：