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

Question

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，它没有提到，也许吧是：

For this reason we use event delegation which replaces multiple event listeners with just a single listener

所以我来这里寻求帮助。

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

Answer 1

根据指南，如果您将相同的 class 添加到所有三个按钮（即类似 "btn" 的东西），然后将 class 选择器传递到剪贴板它应该为你做事件委托。

<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>

Answer 2

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

有事件委托

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

没有事件委托

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

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

How to use event delegation when using clipboardjs?

javascript

event-delegation

clipboard.js