ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

４９．マウス入力とイベントe

マウスの入力についてです。

Javascriptでもマウスからの入力を得ることができます。

マウスのボタンが押された時の場合

・onmousedown

onmousedownイベントでボタンが押された時の
動作を定義できます。

・e.which

イベントのプロパティ which は

左：1
真ん中：2
右：3

と数値を返します。

また、マウスを動かした場合

・onmousemove

onmousedownイベントでマウスが動かされた時の
動作を定義できます。

イベントのプロパティ pageX, pageY

で座標を取得することもできます。

今回使用するソースコード
function main() {
//イメージ要素の作成
div = document.createElement("div");
//<body>に要素を追加
document.body.appendChild(div);
}

document.onmousedown = function (e) {

　　if(e.which == 1)
　　alert("左ボタンが呼ばれました");

　　if(e.which == 3)
　　alert("右ボタンが呼ばれました");
}

document.onmousemove = function (e) {

　　//div要素にマウスのX座標を出力
　　div.innerHTML = "X座標:" + e.pageX + "Y座標" + e.pageY;
}

さて、このfuntcion の引数 e は一体なんでしょう？

引数なのにどこにも使われていないように見えます

この e は、マウス操作をした時のイベントオブジェクトが入っています。

そして、実は、

メソッド(e)

のようにイベントのどこかで使われているのです。
そのため、e は、イベントオブジェクトを受け取り

メソッドの中で e.which　とプロパティやメソッドを実行できるのです。

オブジェクト指向の迷いやすい部分として、ブラックボックスになっているところが
よく分からなくなります。しかし、上記のように考えるとかなりすっきりします。

さらにいえば、その謎の部分を気にせず、「こう使うものだ」と覚えるべきです。

実行結果

(マウスの左右をクリックしてください)

コラム：

また、e のような方法でよく、他の言語でも
イベントやオーバーライドするときに同じような方法が使われます。

通常の引数ではないので要注意です。

(C)著作権はふぇりあ１６歳とお兄ちゃんにあります。
無断転載、盗用は禁止です。