JavaScript addEventListener()でコピーイベントの発火を実装する
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
構文
変数名.addEventListener(`copy`,()=>{処理コード})
コピーが実行された時の発火イベントはaddEventListener()で「copy」を指定しています。
addEventListener()を使ってテキストのコピーをトリガーにしたイベントを実装します。
使用例
<!DOCTYPE html>
<html>
<body>
<p class="city">東京</p>
<p id="res"></p>
<script>
let city = document.querySelector(`.city`);
let result = document.querySelector(`#res`);
// イベントの登録
city.addEventListener(`copy`,()=>{
result.textContent = '文字「東京」コピーが実行されました';
});
</script>
</body>
</html>
実行結果
文字「東京」を右クリックでのコピー、または「Ctrl」+[C]のコピーする場合、要素「id="res"」に「文字「東京」コピーが実行されました」が表示されます。