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

How to use event delegation when using clipboardjs?

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

所以我来这里寻求帮助。

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

根据指南,如果您将相同的 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>

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

有事件委托

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

没有事件委托

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