javascript – 有没有办法将参数传递给addEventListener？

2023年1月23日 350次阅读

我试图隐藏类(徽标)中的所有元素,除了单击的元素.所以我写出来只是为了意识到将参数传递给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));
}

最佳答案 您问题的字面答案：

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

会做你想做的.你需要一个函数来包装click(i),因为你不想立即执行click(i);你需要另一个函数来关闭我,否则你会得到看似奇怪的结果(即总是点击(logos.length)).

你想要做的事情是根本不使用迭代器.将一个监听器附加到#logos本身;在处理程序中(将获取一个事件参数),迭代其子项并与event.target进行比较.

点赞