【JavaScript】 createEventとinitMouseEventを覚えた【メモ】

JavaScriptの演習がてら、Greasemonkeyをいじったんですが、createEventとinitMouseEventを使ったらめちゃくちゃ簡単になることが分かって凄く嬉しくなった。createEventはDOM2にあるけどinitMouseEventはGeckoのDOMメソッドぽい。でもまぁ、Greasemonkeyをいじるぶんにはそれで十二分。

document.createEvent – MDC
event.initMouseEvent – MDC

以下、自分用のちょっとしたメモ。

document.createEvent

「document.createEvent」は、指定されたタイプのイベントを生成するメソッド。

var evt = document.createEvent("MouseEvents");

生成したイベントは「element.dispatchEvent」を使うことで使用できるけど、使用する前に必ず初期化してやる必要がある。

event.initMouseEvent

というわけで、「document.createEvent」で作った「MouseEvents」を初期化。

evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

ちなみにこの「event.initMouseEvent」の難点は、引数が多すぎること。上の例で、分かった風に設定してるけど、すみません、殆どわかりません（苦笑）だって、引数、15個もあるんだぜ！そんなメソッドあるかよｗ

まぁそうは言っても調べないまま使うのも気持ちが悪いので、一応ドキュメント（英語）を読んでみる。
以下、15引数の羅列。

type: the string to set the event’s type to. Possible types for mouse events include:click,mousedown,mouseup,mouseover,mousemove,mouseout.; セットするマウスイベントのタイプを選択する
canBubble: whether or not the event can bubble. Sets the value of event.bubbles.; bubbleを許可するかどうか。bubbleというのは「イベントが浮上」と訳されているのだけどちょっとわかりにくい。イベントが発生する場所を子ノードから親ノードに移管させていくということらしいのだけど。（cf. DOM イベントの bubbling フェイズ終着点が UA によって違う – resize の罠）
cancelable: whether or not the event’s default action can be prevented. Sets the value of event.cancelable.; 途中で処理を止められるかどうか
view: the Event’s AbstractView. You should pass the window object here. Sets the value of event.view.; 処理させるウィンドウのオブジェクト
detail: the Event’s mouse click count. Sets the value of event.detail.; 「event.detail」はマウスが何回クリックされたかを記録しておいて、クリック/ダブルクリック/トリプルクリックを判別する目的に使われるそう。このオプションはそのデフォルト値を設定するみたいなのだけど、判別を使わないのなら0でいいんじゃないのかな。多分。
screenX: the Event’s screen x coordinate. Sets the value of event.screenX.; スクリーンの左上からの座標（X軸）。特に使用しなければ0で。
screenY: the Event’s screen y coordinate. Sets the value of event.screenY.; スクリーンの左上からの座標（Y軸）。特に使用しなければ0で。
clientX: the Event’s client x coordinate. Sets the value of event.clientX.; 文書の左上からの座標（X軸）。特に使用しなければ0で。
clientY: the Event’s client y coordinate. Sets the value of event.clientY.; 文書の左上からの座標（Y軸）。特に使用しなければ0で。
ctrlKey: whether or not control key was depressed during the Event. Sets the value of event.ctrlKey.; イベント中にCtrlキーを押した状態にするかどうか。「event.ctrlKey」はCtrlキーが押されているときにtrueを、押されていないときにfalseを返すので、このオプションもtrueを設定するとCtrlを押した状態になると思われ。
altKey: whether or not alt key was depressed during the Event. Sets the value of event.altKey.; イベント中にAltキーを押した状態にするかどうか。詳細はCtrlと同じ。
shiftKey: whether or not shift key was depressed during the Event. Sets the value of event.shiftKey.; イベント中にShiftキーを押した状態にするかどうか。詳細はCtrlと同じ。
metaKey: whether or not meta key was depressed during the Event. Sets the value of event.metaKey.; イベント中にMetaキーを押した状態にするかどうか。詳細はCtrlと同じだけど、unixにしかないキーっぽい。
button: the Event’s mouse event.button.; どのマウスボタンを使用するか。「event.button」によると、0を設定すると左クリック、1で中クリック、2で右クリックとなるらしい。
relatedTarget: the Event’s related EventTarget. Only used with some event types (e.g.mouseover andmouseout). In other cases, passnull.; 関連するイベントの設定。MouseOverとMouseOutの時だけ使用するのでそれ以外はnull。