function(e)のeってなんだ？

最近、週１くらいのペースでミニアプリを作りながらjQueryを教わってる。
教えていただいたことをメモしておく。

jQueryを書くとき、基本はこう書くってことは知ってた。

$(セレクタ).イベント(function(){
  // 処理
});

意味がしっかりわからなくてもこれが書ければなんとなくでできちゃうことがけっこうある。たとえば、ページの先頭に戻るボタンの実装とか。文字をすっと消したりとか。

んで、こうやって書くのも見かけることがある。

$(セレクタ).イベント(function(e){

こう書く場合の、(e)はなんなんだ？引数？
え？何を持ってるんだこのeは？

というわけで教えてもらったのが、「コンソールに出せばわかるよ」ということ。
こう書いて、

$("#sample").click(function(e){
  console.log(e);
});

コンソールを見ると

jQuery.event

というのが返ってきてる。これを開くと、

altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 99
clientY: 47
ctrlKey: false
currentTarget: input#sample
data: null
delegateTarget: input#sample
...(省略)

て感じ。

ほほう、これがjQueryイベントの正体か。

たとえば先ほどのクリックイベントでこのeを使って、

alert(e.clientX);

とすれば、クリックした場所のx座標がアラートで返ってくる。

また、keypressイベントなら「どのキーが押されたか」というのを見ることもできる。

$("#sample").keypress(function (e){
  alert(e.keyCode);
});

うーん、面白い。こういうのを使えば、「エンターキーが押されたら」みたいな判定も実装できるようになる。そういうことをしたいときは、function(e)と(eじゃなくてもいいけど)書く必要があるみたい。

jQuery、まだそんなに深くやってるわけじゃないけど、UI周りの「あそこをあれされたらこれする」っていう機能の実装がすごい直感的で楽しい。