addEventListener

HTMLとCSSJavaScriptを使ってお絵描きアプリケーション作った。
そのときJSでよく使ったのが

addEventListener(type,listener,useCapture)

というメソッド。

HTMLのcanvas要素をJSの変数canvasに代入

canvas.addEventListener("mousedown",function(e){,,,(略),,,},false);
canvas.addEventListener("mousemove",function(e){,,,(略),,,},false);
canvas.addEventListener("mouseup",function(e){,,,(略),,,},false);

マウスダウン時と、マウスが要素の上で動いている時と、マウスアップ時に
それぞれのlistenerに指定したコールバックが呼ばれる。
(それぞれのfunction(e)の中身が実行される。)

イベントは独立して発生するから、
mousemoveはmousedownされているかどうかに関わらず発生してしまうので
もしmousedownされていなかったらreturnとかにしないと、ひどいことになる。

if (!down) return;

そして、
ググってみたのだけど、useCaptureというのがわからない。

でもcho45先生が「useCaptureはとりあえず気にせずfalseを指定しておきましょう。」って言ってるー。
お前にはまだ早い、って言ってるー。たぶん。

今度先輩に聞いてみます。

とりあえず、よく使うイベントの種類をメモ

                                                                            • -

click クリック時
mousedown マウスダウン時
mouseup マウスアップ時
mouseover カーソルがその要素に入ってきたとき
mousemove マウスがその要素の上で動いたとき
mouseout カーソルがその要素から出て行ったとき
load 対象がロード完了したとき
submit  フォームが送信されるとき
forcus  フォーカスされたとき
blur  フォーカスを失ったとき
scroll   内容がスクロールされたとき
keypress  キーが押されたとき
keydown  キーが押し下げられた時
keyup  キーが押し上げられたとき