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

调用/调用匿名函数内部的函数：

("A1:Z171")

Answer 2

您有很多选择：

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()的其他事物的签名等。

Answer 3

如果要为每个卡分配一个动态侦听器，则可以让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>

如何将带有addEventListener的参数发送给函数？

3 个答案:

数据属性

儿童索引