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

MouseEvent() - コンストラクタ

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

概要

名前
MouseEvent
所属
MouseEvent
IDL
Constructor(DOMString type, optional MouseEventInit eventInitDict)

dictionary MouseEventInit : EventModifierInit {
  long screenX = 0;
  long screenY = 0;
  long clientX = 0;
  long clientY = 0;

  short button = 0;
  unsigned short buttons = 0;
  EventTarget? relatedTarget = null;
};

partial dictionary MouseEventInit {
    long movementX = 0;
    long movementY = 0;
};

partial dictionary MouseEventInit {
  double screenX = 0.0;
  double screenY = 0.0;
  double clientX = 0.0;
  double clientY = 0.0;
};

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

dictionary UIEventInit : EventInit {
  Window? view = null;
  long detail = 0;
};

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

説明

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

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

screenX
screenXの値。初期値は0.0。
screenY
screenYの値。初期値は0.0。
clientX
clientXの値。初期値は0.0。
clientY
clientYの値。初期値は0.0。
button
buttonの値。初期値は0。
buttons
buttonsの値。初期値は0。
relatedTarget
relatedTargetの値。初期値はnull。
movementX
movementXの値。初期値は0。
movementY
movementYの値。初期値は0。
ctrlKey
ctrlKeyの値。初期値はfalse。
shiftKey
shiftKeyの値。初期値はfalse。
altKey
altKeyの値。初期値はfalse。
metaKey
metaKeyの値。初期値はfalse。

下記は、getModifierState()の結果に影響を与えるキーです。

modifierAltGraph
Altを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierCapsLock
CapsLockを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierFn
Fnを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierFnLock
FnLockを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierHyper
Hyperを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierNumLock
NumLockを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierScrollLock
ScrollLockを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierSuper
Superを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierSymbol
Symbolを引数にした時の返り値を真偽値で指定する。初期値はfalse。
modifierSymbolLock
SymbolLockを引数にした時の返り値を真偽値で指定する。初期値はfalse。

チュートリアル

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

var event = new MouseEvent( "mousemove", {
	clientX: 123 ,
	clientY: 987 ,
} ) ;

element.dispatchEvent( event ) ;

デモ

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

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

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
	height: 240px ;
	line-height: 240px ;
	background-color: #d36015 ;
	font-weight: 700 ;
	text-align: center ;
	color: #fff ;
}
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<button id="create">イベントを作成</button>
<hr>
<div id="hoge">please mousemove !</div>
<hr>
<p>mousemoveの発生回数→<span id="count">0</span></p>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
element.addEventListener( "mousemove", getEventInfo ) ;

var number = 0 ;

document.getElementById( "create" ).onclick = function () {
	var event = new MouseEvent( "mousemove", {
		clientX: 123 ,
		clientY: 987 ,
	} ) ;
	element.dispatchEvent( event ) ;
}

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

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

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

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
26+ 11+ 7.1+× 16+ 7.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月24日 (火)
コンテンツを公開しました。