javascript - 表事件委托中所有按钮的JavaScript事件侦听器？

Question

我一直在使用 oneclick 方法并且正在重写我的网站并希望切换到现代的服务（事件监听器）

我了解如何添加事件侦听器。

Const button = document.getElementById('button'); 

button.addEventListener('click');

我可以遍历所有按钮，但我将如何正确地进行事件委托？

基本上我有一张桌子。我想定位其中具有特定类“编辑用户”的每个按钮，并监听任何被点击的按钮。

谢谢，但对事件委托和定位特定元素以及为整个表设置一个事件侦听器的最佳方式感到困惑。为每个按钮添加 50 个不同的侦听器似乎很糟糕。

标签： javascriptevent-listener

Answer 1

事件委托以这种方式工作：（
使用element.matches更容易）

<table id="my-table">

 ...

  <tr>
    <td>
      <button class="edit-user">aaa</button>
 ...

  <tr>
    <td>
      <button class="edit-user">bbb</button>
 ...

  <tr>
    <td>
      <button class="other-class">ccc</button>
 ...

const myTable = document.querySelector('#my-table')

myTable.onclick = e =>
  {
  if (!e.target.matches('button.edit-user')) return // reject other buttons

  console.log( e.target.textContent)  // show "aaa" or "bbb"

  // ...
  }