如何将 JavaScript 中的事件或函数添加到 HTML 集合中？答案

【问题标题】：How to add an event or function in JavaScript to an HTML collection?如何将 JavaScript 中的事件或函数添加到 HTML 集合中？
【发布时间】：2021-02-22 09:17:16
【问题描述】：

我有以下 JavaScript ，其中我得到一个 HTML 元素（网格）和 HTML 元素子项（网格内的照片）。

let Galeria = document.getElementById("CaixaGaleria");
let GaleriaPhoto = document.getElementById("CaixaGaleria").children;

这是 HTML：

 <div id ="CaixaGaleria" class="gallery">
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
  </div>

我的目标是为孩子们添加一个 EventListener ，这样当我点击它们时，图像就会显示在它的原始大小和比例上，如下所示：

GaleriaPhoto.addEventListener("click" , function(){
    *this function should display image's original size on a new window or popup*
 }
  );

但是，我无法将 EventListener 添加到此元素，也无法添加 ForEach() 或 push()。

我总是会收到一些错误，例如“TypeError: GaleriaPhoto.addEventListener is not a function”。

我可以做到，对于第一个变量但不是第二个变量，所以我认为问题与它是一个 HTML 集合有关？

【问题讨论】：

这是因为它正在迭代所有子节点，包括文本节点等，不会有addEventListener的功能。只需检查节点类型是否正确或预先检查函数是否存在。
你能提供一个minimal reproducible example包括html吗？还可以考虑将 EventListener 添加到 CaixaGaleria 并利用 Event.target 来点击子元素
您好，感谢您的帮助。这是否意味着我必须删除 div 内的文本？
忽略我之前的评论，我和.childNodes 混淆了，而不是.children。在这种情况下，您只需遍历每个节点即可应用事件监听器

标签： html getelementbyid htmlcollection

【解决方案1】：

您还可以将事件侦听器添加到库，然后使用event.target 从单击的元素中获取信息。这具有处理动态添加的元素而无需重新绑定事件侦听器的优势。

注意，在这个例子中，目标实际上是图像，而不是 div。

let gallery  = document.getElementById("CaixaGaleria");
gallery.addEventListener("click", function(event){
  console.log(event.target);
  //Your logic to display image here
  //Demo
  alert("src = " +event.target.src);
})

<div id="CaixaGaleria" class="gallery">
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
</div>

【讨论】：

谢谢，这实际上对我正在尝试做的事情很有帮助！ =D

【解决方案2】：

为每个孩子添加点击事件，并使用不同的参数调用相同的处理程序。像这样，

<html>
 <div class="gallery">
    <div onclick="handleClick('Imagens/Filme/14.jpg')" data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>

  </div>
</html>

<script>
 function handleClick(url){
    // handle url
 }
</script>

【讨论】：

不要这样做。如今，内联事件处理程序被认为是不好的做法。有很多更好的选择

【解决方案3】：

您需要遍历每个子节点并应用事件侦听器，.children 返回一个名为 HTMLCollection 的收集类型（它没有 .addEventListener 函数），而不是一个 html 节点本身（它有）。但是您可以像普通数组一样对其进行迭代。

类似

<div id ="CaixaGaleria" class="gallery">
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
</div>
<script>
  let Galeria = document.getElementById("CaixaGaleria");
  let GaleriaPhotos = document.getElementById("CaixaGaleria").children;
  for(let x = 0; x < GaleriaPhotos.length; x++) {
    GaleriaPhotos[x].addEventListener("click" , function(){
        alert("blah");
      }
    );
  }
</script>

【讨论】：

谢谢哥们！！我尝试在 GaleriaPhoto 上使用 ForEach() 来执行此操作，但它不起作用 xD 哈哈
没问题 :) 那是因为即使您可以访问像数组 (collection[x]) 这样的索引，它实际上也不是数组，而是 HTMLCollection，所以像 .forEach 这样有用的方法不是为它定义（在此处查看更多信息 -> gavsblog.com/blog/…）
它也可以是一个节点列表，它再次类似于数组，实际上不是一个数组。