DOM

：

：

MouseEvent コンストラクター

　編集：2022.10.05 by T.A.

[Edge]○。、

新しい MouseEvent オブジェクトを作成して返します。

構文
new MouseEvent(typeArg[, mouseEventInit])
typeArg DOMString。イベントの名前を表します。
mouseEventInit 省略可。MouseEventInit 辞書で、以下のフィールドを持ちます。
プロパティ？文字列説明と値
screenX 省略可。long 数値。既定値は 0。ユーザーの画面におけるマウスイベントの水平位置です。この値を設定しても、マウス ポインターは移動しません。
screenY 省略可。long 数値。既定値は 0。ユーザーの画面におけるマウス イベントの垂直位置です。この値を設定しても、マウス ポインターは移動しません。
clientX 省略可。long 数値。既定値は 0。ユーザーの画面のクライアント ウィンドウにおけるマウス イベントの水平位置です。この値を設定しても、マウス ポインターは移動しません。
clientY 省略可。long 数値。既定値は 0。ユーザーの画面のクライアント ウィンドウにおけるマウス イベントの垂直位置です。この値を設定しても、マウス ポインターは移動しません。
ctrlKey 省略可。論理値。既定値は false。ctrl キーが同時に押されていたかどうかを示します。
shiftKey 省略可。論理値。既定値は false。shift キーが同時に押されていたかどうかを示します。
altKey 省略可。論理値。既定値は false。alt キーが同時に押されていたかどうかを示します。
metaKey 省略可。論理値。既定値は false。meta キーが同時に押されていたかどうかを示します。
button 省略可。short。既定値は 0。ボタンの押下や解放に関連するイベント時に、どのボタンが押されたかを示します。
値 意味
0 主ボタン（通常は左ボタン）が押された、または初期化されていない
1 予備ボタン（通常は中ボタン）が押された
2 副ボタン（通常は右ボタン）が押された
buttons 省略可。unsigned short 数値。既定値は 0。イベントが発行されたときに押されたボタンを示します。
ビットフィールド値 意味
0 ボタンが押されていない
1 主ボタン（通常は左ボタン）が押されていた
2 副ボタン（通常は右ボタン）が押されていた
4 予備ボタン（通常は中ボタン）が押されていた
relatedTarget 省略可。EventTarget。既定値は null。離れた要素（mouseenter や mouseover の場合）または、入った要素（mouseout や mouseleave の場合）です。
region 省略可。DOMString。既定値は null。そのイベントによって影響を受けたヒット領域の ID です。影響を受けるヒット領域がない場合は null 値で表現されます。

実装によっては、screenX、screenY、clientX、clientY フィールドに数値以外のものを渡すと TypeError が発生します。

メモ： MouseEventInit ディクショナリーは UIEventInit および EventInit のフィールドも受け入れます。

戻り値

新しい MouseEvent オブジェクト。

例

HTML： 

<SPAN id=IdTest>[SPAN要素。ここでクリック…]</SPAN><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //click イベントの処理：
  D=eve; //＝[object]：[object MouseEvent]

詳細	//isTrusted＝[boolean]：false
	//screenX＝[number]：0
	//screenY＝[number]：0
	//clientX＝[number]：0
	//clientY＝[number]：0
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：2
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：0
	//pageY＝[number]：0
	//x＝[number]：0
	//y＝[number]：0
	//offsetX＝[number]：-19
	//offsetY＝[number]：-80
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：[object HTMLSpanElement]
	//layerX＝[number]：0
	//layerY＝[number]：0
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：null
	//detail＝[number]：0
	//sourceCapabilities＝[object]：null
	//which＝[number]：3
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：click
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…


  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
IdTest.onclick=Job; //イベント割り当て。
Ev=new MouseEvent('click', {button:2}); //click イベントの生成。
IdTest.dispatchEvent(Ev);               //そのイベントを要素に発生させる。

→EventTarget.dispatchEvent()。

マウスによるクリックでの eve は、 

//D＝[object]：[object PointerEvent]

詳細//isTrusted＝[boolean]：true
//pointerId＝[number]：1
//width＝[number]：1
//height＝[number]：1
//pressure＝[number]：0
//tiltX＝[number]：0
//tiltY＝[number]：0
//azimuthAngle＝[number]：0
//altitudeAngle＝[number]：1.5707963267948966
//tangentialPressure＝[number]：0
//twist＝[number]：0
//pointerType＝[string]：mouse
//isPrimary＝[boolean]：false
//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
//screenX＝[number]：401
//screenY＝[number]：186
//clientX＝[number]：194
//clientY＝[number]：111
//ctrlKey＝[boolean]：false
//shiftKey＝[boolean]：false
//altKey＝[boolean]：false
//metaKey＝[boolean]：false
//button＝[number]：0
//buttons＝[number]：0
//relatedTarget＝[object]：null
//pageX＝[number]：194
//pageY＝[number]：2355
//x＝[number]：194
//y＝[number]：111
//offsetX＝[number]：176
//offsetY＝[number]：31
//movementX＝[number]：0
//movementY＝[number]：0
//fromElement＝[object]：null
//toElement＝[object]：null
//layerX＝[number]：194
//layerY＝[number]：2355
//getModifierState＝[function]：function getModifierState() { [native code] }
//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
//view＝[object]：[object Window]
//detail＝[number]：1
//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
//which＝[number]：1
//initUIEvent＝[function]：function initUIEvent() { [native code] }
//type＝[string]：click
//target＝[object]：[object HTMLSpanElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：true
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：true
//…
テスト