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

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

所以我来这里寻求帮助。

请您使用事件委托来修改我的演示吗？

Answer 1

Clipboard.js创建者:)我们已经为您做了活动代表团。您只需将字符串选择器传递给构造函数而不是元素。

使用活动委派

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

没有事件委托

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

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

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

2 个答案: