使用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);
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);