How to use event delegation when using clipboardjs?

Question

Clipboardjs is awesome, but I wonder how to use event delegation when using it.

Here is my code:

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

it works well, but it will attach event listeners for three dom elements, so I want to optimize it by using event delegation, I read the guide, it's not mentioned, maybe it is:

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

so I come here for help.

Could you please modify my demo using event delegation?

Yeah dude, the text you quoted says that the plugin already does delegation for you... — Serg Chernata, Jan 06 '17 at 03:10

score 2 · Answer 1 · answered Jan 06 '17 at 04:48

2

Clipboard.js creator here :) We already do event delegation for you. All you need is to pass a string selector to the constructor instead of an element.

With event delegation

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

Without event delegation

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

answered Jan 06 '17 at 04:48

Zeno Rocha

3,226
1
23
27

woo! nice to see you! thanks for developing such a good library! – hanzichi Jan 06 '17 at 05:04

score 1 · Accepted Answer · answered Jan 06 '17 at 03:06

From the guide, it looks like if you add the same class to all three buttons (i.e., something like "btn"), and then pass that class selector to clipboard it should do the event delegation for you.

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

How to use event delegation when using clipboardjs?

2 Answers2