Как отправить аргумент с addEventListener в функцию?

Question

Я довольно новичок в кодировании и столкнулся с этой крошечной проблемой.Я хочу отправить аргумент с помощью addEventListener.Когда я попытался отправить аргумент с помощью EventListener, он сразу же запустил функцию.Я знаю, это потому, что у меня есть () после имени функции.В основном я пытался сделать следующее:

var card1 = document.getElementById('#id1');
card1.addEventListener('click',choose(1));

function(num){
 var picture = 'pictures/picture1.png';
 document.getElementById(num).src = pic.replace('90x90','225x225');

Это весь код javascript, и его цель - изменить изображение.Картинка var в действительности выбрана на основе некоторых массивов в моем коде, но это всего лишь изображение.

Answer 1

Вызов / вызов функции внутри анонимной функции:

card1.addEventListener('click', function(){ choose(1); });

Answer 2

Если вы хотите назначить динамический прослушиватель для каждой карты, ваше событие click может вернуть вызов функции с целевой картой и индексом.

document.querySelectorAll('.card').forEach((card, index) => {
  card.addEventListener('click', function(e) {
    chooseCard(e.target, index + 1);
  });
});

function chooseCard(card, num) {
  card.classList.toggle('card-' + num);
}

.cards {
  background: green;
  width: 330px;
  height: 100px;
}

.card {
  display: inline-block;
  background: lightgrey;
  width: 50px;
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
  background: url('https://via.placeholder.com/50x80/AAA/F00?text=CARD') center no-repeat;
}

.card-1 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=1') }
.card-2 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=2') }
.card-3 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=3') }
.card-4 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=4') }
.card-5 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=5') }

<div class="cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Атрибут данных

document.querySelectorAll('.card').forEach((card, index) => {
  card.addEventListener('click', function(e) {
    chooseCard(e.target);
  });
});

function chooseCard(card) {
  card.classList.toggle('card-' + card.getAttribute('data-index'));
}

.cards {
  background: green;
  width: 330px;
  height: 100px;
}

.card {
  display: inline-block;
  background: lightgrey;
  width: 50px;
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
  background: url('https://via.placeholder.com/50x80/AAA/F00?text=CARD') center no-repeat;
}

.card-1 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=1') }
.card-2 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=2') }
.card-3 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=3') }
.card-4 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=4') }
.card-5 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=5') }

<div class="cards">
  <div class="card" data-index="1"></div>
  <div class="card" data-index="2"></div>
  <div class="card" data-index="3"></div>
  <div class="card" data-index="4"></div>
  <div class="card" data-index="5"></div>
</div>

Дочерний индекс

const getChildIndex = (el) => [].indexOf.call(el.parentNode.children, el);

document.querySelectorAll('.card').forEach((card, index) => {
  card.addEventListener('click', function(e) {
    chooseCard(e.target);
  });
});

function chooseCard(card) {
  card.classList.toggle('card-' + (getChildIndex(card) + 1));
}

.cards {
  background: green;
  width: 330px;
  height: 100px;
}

.card {
  display: inline-block;
  background: lightgrey;
  width: 50px;
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
  background: url('https://via.placeholder.com/50x80/AAA/F00?text=CARD') center no-repeat;
}

.card-1 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=1') }
.card-2 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=2') }
.card-3 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=3') }
.card-4 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=4') }
.card-5 { background-image: url('https://via.placeholder.com/50x80/FFF/00F?text=5') }

<div class="cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 3

У вас есть много вариантов:

1) Используйте bind, чтобы создать новую функцию с уже заполненным параметром:

var card1 = document.getElementById('#id1');
var choose = function( num ) {
  console.log( num );
};
card1.addEventListener('click', choose.bind(null,1));

<button id="#id1">Card 1</button>

2) Вернуть функцию изнутри choose().Это почти так же, как использование .bind():

var card1 = document.getElementById('#id1');
var choose = function( num ) {
  return function( event ) {
    console.log( num );
  };
};
card1.addEventListener('click', choose(1));

<button id="#id1">Card 1</button>

3) Пусть элемент карты скажет вам номер:

var card1 = document.getElementById('#id1');
var choose = function( event ) {
  var num = event.target.getAttribute( 'data-number' );
  console.log( num );
};
card1.addEventListener('click', choose );

<button id="#id1" data-number="1">Card 1</button>

4) Другой ответ, приведенный ниже, также создает другую функцию, но путем ее непосредственного написания вместо возврата или использования .bind().

Какой из них использовать, полностью зависит от того, что подходит для вашего проекта, ваших собственных предпочтений, подписи других вещей, которые могут использовать choose() и т. Д.