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

Question

我有以下 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 集合这一事实有关？

Answer 1

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

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

Answer 2

您需要遍历每个子节点并应用事件侦听器，.children returns 一个名为 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>

Answer 3

您还可以将事件侦听器添加到图库，然后使用 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>

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

How to add an event or function in JavaScript to an HTML collection?

html

getelementbyid

htmlcollection