DOM

：

：

Element：copy イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

ユーザーがブラウザーのユーザー インターフェイスからコピー操作を実行したときに発生します。

このイベントの既定の動作は、（もしあれば）選択範囲をクリップボードへコピーすることです。

このイベントのハンドラーは、DataTransfer.setData(format, data) をイベントの ClipboardEvent.clipboardData プロパティに対して呼び出すことで、クリップボードの内容を変更したり、event.preventDefault() を使用してイベントの既定の動作を取り消したりすることができます。

ただし、ハンドラーがクリップボードのデータを読み取ることはできません。

copy イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。

バブリング あり
キャンセル 可能
インターフェイス ClipboardEvent
イベント ハンドラー プロパティ oncopy
例
mdnより

HTML： 

<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

JavaScript： 

const source = document.querySelector('div.source');

source.addEventListener('copy', (event) => {
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    event.preventDefault();
});

HTML： 

<div id=IdTest contenteditable>ここでコピー操作してみてください。</div>
<TEXTAREA id=IdArea>ここに貼り付けしてみてください。</TEXTAREA>

JavaScript： 

function Job(eve){
  D=eve; //＝[object]：[object ClipboardEvent]
	//isTrusted＝[boolean]：true
	//clipboardData＝[object]：[object DataTransfer]
	//type＝[string]：copy
	//target＝[object]：[object HTMLDivElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…
  let E=eve.target;
  E.style.backgroundColor="#fee";
}
IdTest.oncopy=Job;

→DataTransfer。

テスト