Wie Ereignisdelegierung verwenden, wenn Clipboardjs verwendet?

-1

Clipboardjs ist genial, aber ich frage mich, wie man Ereignis Delegation verwenden, wenn Sie es verwenden.Wie Ereignisdelegierung verwenden, wenn Clipboardjs verwendet?

Hier ist mein 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>

es funktioniert gut, aber es wird Ereignis-Listener für drei dom Elemente anhängen, so möchte ich es optimieren, indem Ereignis Delegation mit, las ich die guide, ist es nicht erwähnt es ist, vielleicht:

Aus diesem Grunde wir Ereignis Delegation zu benutzen, die mit nur einem einzigen Zuhörer mehr Event-Listener ersetzt

also komme ich hier um Hilfe.

Könnten Sie bitte meine Demo mithilfe der Ereignisdelegierung ändern?

Quelle

2017-01-06 hanzichi

Ja Geck, der Text sagt zitiert, dass das Plugin bereits Delegation für Sie tut ... –

vielleicht hast du recht, meine schuld – hanzichi

Aus der Anleitung sieht es so aus, als ob Sie allen drei Schaltflächen die gleiche Klasse hinzufügen (d. H. Etwas wie "btn") und dann die Klassenauswahl an die Zwischenablage weitergeben.

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

Quelle

2017-01-06 03:06:59 fshaw1

danke, mein misunderstan ding – hanzichi

Clipboard.js Schöpfer hier :) Wir haben schon für Sie Ereignis Delegation tun. Sie müssen lediglich einen Zeichenfolgenselektor anstelle eines Elements an den Konstruktor übergeben.

Mit Ereignis Delegation

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

Ohne Ereignis Delegation

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

Quelle

2017-01-06 04:48:38

woo! schön dich zu sehen! Danke für die Entwicklung einer so guten Bibliothek! – hanzichi

Wie Ereignisdelegierung verwenden, wenn Clipboardjs verwendet?

Antwort

Verwandte Themen