Javascript 使用addEventListener单击图像时，如何显示图像的文件名？

我在HTML页面上有一个图像网格，我试图在单击图像文件时创建一个带有图像文件名称的警报。我从数组URL中的python脚本中提取图像

下面是我的HTML代码，包括相关的JS部分。我尝试使用alertdocument.src不向函数传递任何变量，但单击图像会在警报中显示“未定义”。我还尝试将一个变量传递到函数中，并在我的警报中调用该变量，但结果显示“[object MouseeEvent]”

为了显示原始图像文件名，我在函数中做了哪些更改？是否有办法增加函数的灵活性，以便无论单击哪个图像，都可以运行相同的函数，而不是对所有四个图像重复相同的函数

<tr>
  <div class="row">
    <td> <img src="{{ urls[0] }}" id="img0"></td>
    <td> <img src="{{ urls[1] }}" id="img1"></td>
    <td> <img src="{{ urls[2] }}" id="img2"></td>
    <td> <img src="{{ urls[3] }}" id="img3"></td>
  </div>
</tr>

<script>
      document.getElementById("img0").addEventListener("click", myFunction, false);

      function myFunction(image) {
        alert(image);
        // alert(document.src);
      }
    </script>

您可以使用this.src

要将事件处理程序附加到所有图像，可以使用document.querySelectorAll

您可以使用this.src

要将事件处理程序附加到所有图像，可以使用document.querySelectorAll

可以使用event.target返回事件来源的元素

演示： const images=document.querySelectorAllimg images.forEachfunctionimg{ img.addEventListenerclick，functionevent{ console.logevent.target.src； } } img{ 高度：10公分； } 单击图像，在控制台中查看其来源 可以使用event.target返回事件来源的元素

演示： const images=document.querySelectorAllimg images.forEachfunctionimg{ img.addEventListenerclick，functionevent{ console.logevent.target.src； } } img{ 高度：10公分； } 单击图像，在控制台中查看其来源 你可以到处玩

常数数据=[ { id:‘img_1’， src:'https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12231413/Labrador-Retriever-MP.jpg', alt:“这是图像！” }, { id:“img_2”， src:'https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg', alt:“这是图像！” } ]; const ul=document.createElement'ul'； const appDiv=document.getElementById'app'； ul.style.listStyle='none'； 常数drowList==>{ data.mapimg=>{ const li=document.createElement'li'； const liImg=document.createElement'img'； liImg.src=img.src； liImg.alt=img.alt； liImg.title=img.alt； liImg.id=img.id； liImg.style.width='200px'； liImg.style.height='150px'； liImg.addEventListener'click'，=>alertImageimg.alt li.liimg； ul.appendChildli； } } const alertImage=img=>{ 警报 } 打猎者 appDiv.appendChildul； 你可以到处玩

常数数据=[ { id:‘img_1’， src:'https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12231413/Labrador-Retriever-MP.jpg', alt:“这是图像！” }, { id:“img_2”， src:'https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg', alt:“这是图像！” } ]; const ul=document.createElement'ul'； const appDiv=document.getElementById'app'； ul.style.listStyle='none'； 常数drowList==>{ data.mapimg=>{ const li=document.createElement'li'； const liImg=document.createElement'img'； liImg.src=img.src； liImg.alt=img.alt； liImg.title=img.alt； liImg.id=img.id； liImg.style.width='200px'； liImg.style.height='150px'； liImg.addEventListener'click'，=>alertImageimg.alt li.liimg； ul.appendChildli； } } const alertImage=img=>{ 警报 } 打猎者 appDiv.appendChildul；

---

console.logimage当在事件处理程序中单击“请”时，使用alertthis.src.console.logimage当在事件处理程序中单击“请”时，使用alertthis.src。第一部分工作正常！但是当我用IDIMG0.addEventListenerclick替换document.getElement时，myFunction，false；使用document.queryselectoral.row>td>img.forEachimg=>img.addEventListenerclick，myFunction，false；单击图像时，我不再得到任何响应，控制台日志中也没有任何事情发生either@Henrik你能提供一个可复制的例子吗？@Henrik问题是你的表结构无效。使用document.querySelectorAllimg修复了它。@Henrik没问题。第一部分工作得很好！但是当我用IDIMG0.addEventListenerclick替换document.getElement时，myFunction，false；使用document.queryselectoral.row>td>img.forEachimg=>img.addEventListenerclick，myFunction，false；单击图像时，我不再得到任何响应，控制台日志中也没有任何事情发生either@Henrik你能提供一个可复制的例子吗？@Henrik问题是你的表结构无效。使用document.querySelectorAllimg修复了它。@Henrik没问题。谢谢！这似乎是另一个很好的合作选择谢谢！这似乎是另一种情况 r是一个很好的选择

<tr>
  <div class="row">
    <td> <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12231413/Labrador-Retriever-MP.jpg" id="img0"></td>
    <td> <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2020/04/shelter-dog-cropped-1-632x329.jpg" id="img1"></td>
  </div>
  <div class="row">
    <td> <img src="https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg" id="img2"></td>
    <td> <img src="https://dogtime.com/assets/uploads/2011/03/puppy-development-1280x720.jpg" id="img3"></td>
  </div>
</tr>

<script>
  // document.getElementById("img0").addEventListener("click", myFunction, false);
  document.querySelectorAll(".row > td > img").forEach(img => img.addEventListener("click", myFunction, false));


  function myFunction() {
    alert(this.src);
  }
</script>

function myFunction() {
    alert(this.src);
}

document.querySelectorAll("img").forEach(img => img.addEventListener("click", myFunction, false));