我如何知道在按钮类中单击了哪个按钮？答案

【问题标题】：How I know which button been clicked in class of buttons?我如何知道在按钮类中单击了哪个按钮？
【发布时间】：2021-05-17 11:42:07
【问题描述】：

我有一类按钮，我想知道使用 JavaScript 点击了哪一个

    <button class="editors">Edit</button>
    <button class="editors">Edit</button>
    <button class="editors">Edit</button>

所以我想知道点击了哪个按钮

【问题讨论】：

您可以使用 document.querySelectorAll(".editors") 获取按钮并将它们存储为数组并使用 foreach 并添加项目单击事件，然后您可以看到使用 event.target 单击的按钮
这样做的用例是什么？

标签： javascript html dom dom-events

【解决方案1】：

您可以将 this 传递给您的函数，然后您就可以引用单击的按钮。

[...document.getElementsByClassName('editors')].forEach(x => {
  x.addEventListener('click', function() {
    myFunction(this);
  })
});


function myFunction(el) {
  console.log(el);
}

[...document.getElementsByClassName('editors')].forEach(x => {
  x.addEventListener('click', function() {
    myFunction(this);
  })
});


function myFunction(el) {
  console.log(el);
}

<button class="editors">1</button>
<button class="editors">2</button>
<button class="editors">3</button>

【讨论】：

【解决方案2】：

您可以将事件侦听器附加到文档或按钮的包装元素/div，然后使用 event.target 属性。这样，您只使用 1 个事件侦听器，而不是为每个元素附加多个。这种方法称为 Event Delegation。您可以检查不同的event属性here。

document.addEventListener('click', function(evt) {
  let element = evt.target;
  console.log(`Clicked button: ${element.textContent}`);
});

<button class="editors">Edit</button>
<button class="editors">Details</button>
<button class="editors">Delete</button>

【讨论】：