使用clipboardjs时如何使用事件委托？答案

【问题标题】：How to use event delegation when using clipboardjs?使用clipboardjs时如何使用事件委托？
【发布时间】：2017-01-06 01:51:00
【问题描述】：

Clipboardjs 很棒，但是我想知道在使用的时候如何使用事件委托。

这是我的代码：

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js"></script>
<body>
  <code id="target0">0</code>
  <code id="target1">1</code>
  <code id="target2">2</code>
  <input type="button" value="copy" class="btn0" data-clipboard-action="copy" data-clipboard-target="#target0"/>
  <input type="button" value="copy" class="btn1" data-clipboard-action="copy" data-clipboard-target="#target1"/>
  <input type="button" value="copy" class="btn2" data-clipboard-action="copy" data-clipboard-target="#target2"/>

  <script>
    // new Clipboard('.btn0');
    // new Clipboard('.btn1');
    // new Clipboard('.btn2');

    var btns = document.querySelectorAll('input[type="button"]');
    var clipboard = new Clipboard(btns);
  </script>
</body>

效果很好，但是会为三个dom元素附加事件监听器，所以我想通过事件委托来优化它，我看了guide，没有提到，也许是：

出于这个原因，我们使用事件委托，它用一个侦听器替换多个事件侦听器

所以我来这里寻求帮助。

能否请您使用事件委托修改我的演示？

【问题讨论】：

是的，伙计，你引用的文字说插件已经为你做了委托......
也许你是对的，我的错

标签： javascript event-delegation clipboard.js

【解决方案1】：

Clipboard.js 创建者在这里 :) 我们已经为您完成了事件委托。您只需将字符串选择器而不是元素传递给构造函数即可。

有事件委托

var clipboard = new Clipboard('.btn');

没有事件委托

var btns = document.querySelectorAll('input[type="button"]'); var clipboard = new Clipboard(btns);

【讨论】：

哇！很高兴见到你！感谢您开发了这么好的库！

【解决方案2】：

从指南看来，如果您将相同的类添加到所有三个按钮（即“btn”之类的东西），然后将该类选择器传递到剪贴板，它应该会为您执行事件委托。

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js"></script>
<body>
  <code id="target0">0</code>
  <code id="target1">1</code>
  <code id="target2">2</code>
  <input type="button" value="copy" class="btn btn0" data-clipboard-action="copy" data-clipboard-target="#target0"/>
  <input type="button" value="copy" class="btn btn1" data-clipboard-action="copy" data-clipboard-target="#target1"/>
  <input type="button" value="copy" class="btn btn2" data-clipboard-action="copy" data-clipboard-target="#target2"/>

  <script>
    var clipboard = new Clipboard('.btn');
  </script>
</body>

【讨论】：