Есть ли способ передать аргумент addEventListener?

Я пытаюсь скрыть все элементы в классе (логотипы), за исключением элемента, на который нажата кнопка. Поэтому я написал это только для того, чтобы понять, что невозможно передать аргументы функциям, активируемым addEventListener! Это кажется ... негибким, если не сказать больше. Есть ли еще один очевидный способ передать аргумент, что я слепой (я довольно новичок в Javascript)?Есть ли способ передать аргумент addEventListener?

<!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)); 
}

источник

2015-10-19 Allison Stafford

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

Проверьте ** событие делегирование **, которое позволяет прикрепить событие к элементу более высокого уровня для записи событий для своих детей. Вы можете использовать ** event.target ** для получения информации об элементе, который был нажат, и вам понадобится только один прослушиватель событий. – user2182349

Дословный ответ на ваш вопрос:

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

будет делать то, что вы хотите. Вам нужна функция для обертывания click(i), так как вы не хотите немедленно выполнить click(i); и вам нужна другая функция для закрытия более i, или вы получите, казалось бы, странные результаты (т. е. получение click(logos.length) всегда).

Вместо этого вы не должны использовать итератор. Прикрепите слушателя к самому #logos; в обработчике (который получит параметр event), перебираем его дочерние элементы и сравниваем с event.target.

источник

2015-10-19 01:52:41 Amadan

Но логотипы - это класс, а не идентификатор, так что мне не придется перебирать элементы в классе, чтобы применить addEventListener ко всем из них? –

Err, я немного испортил. По второму предложению вы присоедините одного слушателя к родительскому элементу всех '.logos'. – Amadan

hm, а родитель будет id, а не классом, да? Поскольку у меня есть мой логос, разделенный в разных div с разными родителями, но я полагаю, я мог бы просто запустить его один раз для каждого родительского идентификатора. –

Есть ли способ передать аргумент addEventListener?

ответ

Смежные вопросы