クリップボードを使用する場合のイベント委任の使い方は？

-1

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>

それがうまく動作しますが、それは3つのDOM要素のイベントリスナーを添付しますので、私はイベントの委任を使用して、それを最適化したい、私はguideを読んで、それが言及していません、多分それは次のようになります。ただ、単一のリスナー

で複数のイベントリスナーを置き換え、我々はイベントの委任を使用し、このため

私はここで助けに来る。

イベントデリゲーションを使用してデモを修正していただけますか？

出典

2017-01-06 hanzichi

うん男、あなたが引用されたテキストは、プラグインがすでにあなたのための委任を行うことを言います... –

多分あなたは正しい、私のせい – hanzichi

3つのボタンすべてに同じクラス（「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>

出典

2017-01-06 03:06:59 fshaw1

ありがとう、私のmisunderstan ding – hanzichi

ここでクリエイター：私たちはすでにあなたのためにイベントの委任を行っています。必要なのは、要素の代わりに文字列セレクタをコンストラクタに渡すだけです。イベントの委任なしイベント委任

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

で

は

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

出典

2017-01-06 04:48:38

woo！お会いできてうれしいです！このような良い図書館を開発してくれてありがとう！ – hanzichi

クリップボードを使用する場合のイベント委任の使い方は？

答えて

関連する問題