SYNCERのロゴ
アイキャッチ画像

ClipboardEvent() - コンストラクタ

ClipboardEvent()は、ClipboardEventのコンストラクタです。新しいオブジェクトを作成します。

概要

名前
ClipboardEvent
所属
ClipboardEvent
IDL
Constructor(DOMString type, optional ClipboardEventInit eventInitDict)

dictionary ClipboardEventInit : EventInit {
  DataTransfer? clipboardData = null;
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
仕様書
https://w3c.github.io/clipboard-apis/#dom-clipboardevent-clipboardevent

説明

第1引数(type)には、イベントの種類を表す文字列を指定します。

第2引数(eventInitDict)には、オブジェクトの各値をオブジェクトで定義します。指定できる固有のキーは下記の通りです。Event()のキーを継承しています。

dataTransfer
clipboardDataの値。初期値はnull。説明はDataTransferを参照。

チュートリアル

コンストラクタでClipboardEventを作成する例です。EventTarget.dispatchEvent()の引数にすれば、擬似的にイベントを発生させることができます。

var event = new ClipboardEvent( "copy", {
	clipboardData: new DataTransfer() ,
} ) ;

element.dispatchEvent( event ) ;

デモ

ClipboardEvent()のデモです。ボタンをクリックすると、copyイベントのオブジェクトを作成して擬似的にイベントを発火させます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
textarea#hoge {
	width: 80% ;
	min-height: 140px ;
	font-size: 16px ;
}
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<button id="create">イベントを作成</button>
<hr>
<textarea id="hoge">SYNCER SYNCER SYNCER SYNCER</textarea>
<hr>
<p>copyの発生回数→<span id="count">0</span></p>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
element.oncopy = getEventInfo ;

var dataTransfer = new DataTransfer() ;
dataTransfer.setData( "text", "SYNCER" ) ;

var number = 0 ;

document.getElementById( "create" ).onclick = function () {
	var event = new ClipboardEvent( "copy", {
		clipboardData: dataTransfer ,
	} ) ;
	element.dispatchEvent( event ) ;
}

function getEventInfo( event ) {
	document.getElementById( "result" ).textContent = "" ;
	document.getElementById( "count" ).textContent = ++number ;

	console.log( event ) ;
	appendText( event + "\n" ) ;
	appendText( "clipboardData: " + event.clipboardData + "\n" ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
58+ 22+ 10+×× 45+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。