Question

我是新手编程和在显示链接列表的网站上工作。单击特定链接，显示一些图像。现在我想知道我是否需要为每个链接添加一个事件监听器，因为如果我有一个100个链接，这是否意味着我必须编写100个事件监听器？

document.getElementById("monkwhosold").addEventListener("click",function() {disp_img(/MonkWhoSold)});

上面的事件监听器是一个示例，其中用户单击其中一个链接并调用disp_img函数，并将img文件夹路径作为参数传递。

Answer 1

有很多方法可以解决这个问题。这是一个。

<a href="#" class="image-link" data-url="/MonkWhoSold">
<a href="#" class="image-link" data-url="/AnotherImage">
...

然后在JavaScript中你可以写：

// find all <a> tags with class of 'image-link'
var links = document.querySelectorAll('a.image-link');

// loop through them all
for (var i = 0; i < links.length; i++)
{
    var link = links[i];
    // listen for the click event
    link.addEventListener('click', function()
    {
        // on click, show the image using the URL from the data-url attribute
        disp_img(link.data.url);
    });
}

这不使用任何jQuery。如果你现在开始编程，我认为值得直接学习DOM的东西。曾几何时，这并不容易，或者没有跨浏览器工作，jQuery非常有价值。现在这不太真实，尽管它仍然很方便。

在此代码中，您只需要学习三个功能：

querySelectorAll查找与某些CSS选择器匹配的所有元素
addEventListener将回调函数附加到特定事件
element.data访问存储在HTML

data-foo="bar"

除了for，function以及该语言的其他简单元素之外。

Answer 2

首先，我建议您使用类似jQuery的东西，原因很多。

假设您以这种方式拥有一系列图像：

<div id="myLinks">
   <a href="...">link1</a>
   <a href="...">link2</a>
   ...
</div>

使用

$('#myLinks a').on('click', function() {disp_img($(this).attr("href"))});

这就像您使用普通Javascript编写的代码。但是，就像你的一样，这样你就可以为每个图像创建一个处理程序（非常慢）。

但我建议使用这个：

$('#myLinks').on('click', 'a', function() {disp_img($(this).attr("href"))});

因为通过这种方式，您只对所有链接使用一个侦听器。这是更高效的！

Answer 3

如果您有许多链接，请按类获取元素。

JavaScript的：

document.getElementsByClassName("imageLink").addEventListener("click", function () { 
      //do something
});

JQuery的

$('.imageLink').on('click', function () {
      //do something
});

这样你就有了一个功能，而不是每个链接一个功能。

单击链接以显示图像

3 个答案: