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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 26+ | ● 11+ | ● 7.1+ | ● | × | ● 16+ | ● 7.0+ | ● 4.4+ |
関連記事
- InputEvent()
- InputEvent()は、InputEventのコンストラクタです。新しいオブジェクトを作成します。
- mousedownイベント
- mousedownイベントは、マウスボタンを押した時に発生するイベントです。
- Event
- Eventは、イベントの内容を確認したり、変更するための機能を備えたインターフェイスです。
- selectstartイベント
- selectstartイベントは、選択を開始した時に発生するイベントです。