イベントについて

ここでJavaScriptを知る上で大事な，イベントについて説明しておきます。イベントとはたとえばマウスのクリックだったり，キーボードでの文字入力などです。JavaScriptではこういったイベントが起きたときに何かするということを定義できます。この何かするというのをイベントハンドラといい，イベントに対してイベントハンドラを定義することをイベントのバインドと呼びます。

jQueryでイベントの設定をおこなうには以下のように記述します。

// イベントハンドラ
function clickHandler() {
    alert('clicked!');
}

// elementのclickイベントに対してclickHandlerをバインドする
$('.btn').bind('click', clickHandler);

jQueryではbind()を使ってイベントを設定します。また，jQeuryでは以下のようにbind()のショートカットとしてclick()なども使うことができます。これはショートカットなので動作は同じになります。

$('.btn').click(clickHandler);

さらに，JavaScriptでは無名関数という関数に名前をつけないでも使用することができるという機能があるので，上記のコードはさらに以下のようにかけます。

$('.btn').click(function() {
    alert('clicked!');
});

このスクリプトは以下で確認できます。

イベントは多少わかりにくいところもありますが，JavaScriptとイベントは切っても切れない関係ですので，最初のうちに理解しておくとその後の学習がスムーズにいくと思います。

今回のお題

それでは最後に今回のお題を掲載します。

概要

今回はマウスオーバーするとサブメニューが表示されるようなナビゲーションをjQueryで作ってみましょう。HTMLとCSSはあらかじめ書いてありますので，forkしてJavaScriptのコードのみ付け足してください。jQueryはあらかじめ読み込んでいますので後はコードを書くだけです。

余裕のある人は単にサブナビゲーションの表示・非表示を切り替えるのでなく何かアニメーションしたりエフェクトをかけてみてかっこいいUIにしてみてください。

ヒント

今回のお題ではマウスオーバーしたときに表示にして，マウスアウトしたときに非表示にするという動作が望まれます。なのでマウスオーバーとマウスアウトという2つのイベントを設定する必要があります。このマウスオーバーとマウスアウトを同時におこなう動作はよく使うのでjQueryにはhoverというショートカットが用意されています。

$(element).hover(
    function() { マウスオーバーのときの動作 },
    function() { マウスアウトのときの動作 }
);

もちろん個別に設定しても大丈夫です。jQueryにはこのようによく使う機能にはショートカットが用意されていることが多いです。また，フェードインやスライドダウンなど，ちょっとしたエフェクトもjQueryにはあらかじめ用意されています。余裕がある人は表示の切り替えにこちらも試してみてください。

それでは次回はこのお題について解説したいと思います。