Question

我正在尝试用HTML和JS构建记分板，我想知道是否有可以为一个函数添加2个或3个事件监听器以用于不同的按钮？

我的第一个想法是使用switch语句：

document.getElementById("1").addEventListener("click", score);
document.getElementById("2").addEventListener("click", score);
document.getElementById("3").addEventListener("click", score);
function score() {
  switch(button.id) {
    case "1":
      ...
    case "2":
      ...
      
    ...
  }
}

但它不起作用，有人可以帮助我吗？

感谢。

Answer 1

您可能希望将事件委托给父容器（事件委派）。您可以通过向元素添加数据属性来检索信息

function score(evt) {
  var index = evt.target.getAttribute('data-index');
  if (index) {
    console.log('You clicked on: ' + index);
  }
}

document.getElementsByClassName('container')[0].addEventListener("click", score);

.container div{
  width: 100px;
  border: 1px solid #000;
  background: lightblue;
  margin: 5px;
  text-align: center;
  cursor: pointer;
}

<div class="container">
  <div data-index="1">1</div>
  <div data-index="2">2</div>
  <div data-index="3">3</div>
</div>

Answer 2

试试这个：

html

<input type="button" id="b1" onclick="score(this.id)">
<input type="button" id="b2" onclick="score(this.id)">
<input type="button" id="b3" onclick="score(this.id)">

JS

function score(x)
{
  //your code
}

这应该有用。

Javascript多事件监听器的一个功能

2 个答案: