为所有 <img> 添加 onclick 事件侦听器

Question

纯“香草”javascript 仅回答。

我有一个包含大量图片的网页，我想在页面底部放置一些 javascript，让用户可以点击任何图片来放大它（我打算用模态实现它）。

这是我尝试将点击绑定到每个 :

function enlargeImage(imgElement){
    window.alert("Hi, I'm going to enlarge this image: "+imgElement.src);
    // create modal with <img src="imgElement.src">
}

var imageNodes = document.getElementsByTagName('IMG');
for (var i=0; i<imageNodes.length; i++)
{          
    imageNodes[i].addEventListener('click', enlargeImage(imageNodes[i]));
}

img{
width:100px;
}

<html>
<body>
<h1>Click on an image to enlarge it</h1>
<img src="https://i.ytimg.com/vi/WYlbunrdweQ/maxresdefault.jpg"/>
<img src="https://i.ytimg.com/vi/co1yhzb9fu0/maxresdefault.jpg"/>
</body>
</html>

这有什么作用：

图像 url 已正确传输。

这有什么问题:

它在页面加载时创建模式，而不是在单击图像时创建。它似乎也没有实际绑定任何事件处理程序。

如果它只是绑定事件（为什么调用函数），为什么要这样做？
如何让它按我想要的方式工作？

Answer 1

使用通用处理程序而不是将单独的处理程序绑定到每个 img 似乎可行。

window.onclick = function(clickEvent) {
  if (clickEvent.target.tagName=="IMG"){
    window.alert("Hi, im going to enlarge this image: "+clickEvent.target.src);
  }
}

Answer 2

为事件侦听器使用一个回调函数，该函数以 this 作为参数调用放大。

function enlargeImage(imgElement){
    window.alert("Hi, I'm going to enlarge this image: "+imgElement.src);
    // create modal with <img src="imgElement.src">
}

var imageNodes = document.getElementsByTagName('img');
for (var i=0; i<imageNodes.length; i++)
{          
    imageNodes[i].addEventListener('click', function() {
        enlargeImage(this);
    });
}

img {width:100px;}

<html>
<body>
<h1>Click on an image to enlarge it</h1>
<img src="https://i.ytimg.com/vi/WYlbunrdweQ/maxresdefault.jpg"/>
<img src="https://i.ytimg.com/vi/co1yhzb9fu0/maxresdefault.jpg"/>
</body>
</html>

为所有 <img> 添加 onclick 事件侦听器

Add onclick event listener for all <img>s

javascript

event-handling