javascript - 如何为表行结果的每个按钮添加事件监听器？

Question

在我的 Rails 应用程序中，我从 @results 变量加载表格，以便每个表格行都是一个 @result。对于每个 @result 表格行，我希望有与该 @result 关联的按钮。我尝试为每个按钮使用 Javascript 事件监听器，然后监听 js.erb 文件中的事件

运行应用程序时，看起来只有第一行按钮有事件监听器，我该如何解决这个问题？

此外，我如何将我的 @result 传递给我的 Javascript，以便我可以利用该对象的部分内容？

我尝试通过 Javascript 来执行此操作，因为我想将某些内容复制到剪贴板并将文件保存到计算机上。

js.erb

var copyTextareaBtn = document.querySelector('.button1');

copyTextareaBtn.addEventListener('click', function(event) {

# work with the @result that was clicked over here
});

html.erb

<% @results.each { |result|  %>
    <tr>
      <td><%= result[:id] %></td>
      <td> 
        <button class="button1"> B1 </button> 
        <button class="button2"> B2 </button> 
        <button class="button3"> B3 </button> 
      </td>
    </tr>

    <% } %>

Answer 1

您确实可以向每个元素添加事件监听器。问题是 document.querySelector 将返回第一个第一个匹配的元素。要获取所有这些，您可以使用 document.querySelectorAll。我们可以将您的 JavaScript 重写为:

var btns = document.querySelectorAll('.button1');

Array.prototype.forEach.call(btns, function addClickListener(btn) {
  btn.addEventListener('click', function(event) {
    // code here to handle click
  });
});

请注意，querySelectorAll 返回一个 NodeList，它类似于数组，但不幸的是它不是数组。因此它没有 forEach 以及在 Array 类中找到的类似方法。因此，上面的工作是通过使用 Array.prototype 中的 forEach 来迭代节点。

但是，更好的方法是在表单的父元素或容器或文档级别监听事件。事件会冒泡，因此您可以监听一次单击事件并筛选出您想要响应的类型。这将是一个事件监听器，而不是 N 个(其中 N 是按钮的数量)。