有没有一种方法可以向addEventListener传递参数？

Question

有没有一种方法可以向addEventListener传递参数？

4

我想隐藏类(logos)中除被点击的元素之外的所有元素。然而，我发现无法向addEventListener激活的函数传递参数！这似乎...至少是不灵活的。是否有其他明显的方法可以传递参数，而我却看不到（我对Javascript还比较新）？

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Sexism in Silicon Valley</title>
</head>
<body id="body1">
<div class="parent">
    <img src="kstartup.png" class="logos" id="id1">
    <img src="uber.png" class="logos" id="id2">
    <img src="kpcb.png" class="logos" id="id3">
    <img id="id4" src="r1startup.png" class="logos">
</div>
<div class="parent" id="parent2">
    <img src="zillow.png" class="logos" id="id5">
    <img src="github.png" class="logos" id="id6">
    <img src="tinde.png" class="logos" id="id7">
    <img src="snapchat.png" class="logos" id="id8">
</div>
<script src="index.js"></script>
</body>

</html>

Javascript：

function click(x) {
    for (var i = 0; i < logos.length; i++) {
        if (x !== i) {
        logos[i].style.display = "hidden";
        }
    }

}

var logos = document.getElementsByClassName("logos");
for (var i = 0; i < logos.length; i++) {
    logos[i].addEventListener('click', click(i));
}

- buriedinkant

1

...addEventListener('click', (function(i) { return function() { click(i); } })(i))。 - Amadan

2

请查看事件委托，它允许您将事件附加到更高级别的元素以捕获其子元素的事件。您可以使用event.target获取有关所单击的元素的信息，并且只需要一个事件侦听器。 - user2182349

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amadan · Accepted Answer

您的问题的字面回答是：

logos[i].addEventListener('click', (function(i) { return function() { click(i); } })(i));

您想要的是一个函数，可以包装click(i)，因为您不希望立即执行click(i)；您还需要另一个函数来闭合i，否则您将会得到看似奇怪的结果（例如始终获取click(logos.length)）。

相反，您应该根本不使用迭代器。将侦听器附加到#logos本身；在处理程序中（它将获得一个event参数），遍历其子元素并与event.target进行比较。