デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

イベント(1)

概要

イベントとは「いつ」の指定

オブジェクトとメソッドだけでは、インタラクティブなコンテンツは作成できません。インタラクティブなコンテンツを作成するためには「イベント」という仕組みが必要になります

オブジェクトが「誰が」、メソッドが「何をする」であるなら、イベントは「いつ」となります。これで「ボタンがクリックされたら表示する」等の「誰が」「いつ」「何をする」という構成で文章が作成できます。

イベント
ユーザーの操作(クリックなど)や状態の変化(読込完了など)に応じて発生する情報。jQueryにおいては処理を実行するタイミングと考えてください。

2つの構文

jQueryのイベントには初心者向けのイベント構文と、上級者向けのイベント構文があります。初心者向けの構文はシンプルで利用しやすいのですが、動的な要素(ページ後半で説明)に対応できないため上級者向けの構文も覚える必要があります。このページでは初心者向けの構文を説明し、次ページで上級者向けの構文を説明します。

解説

初心者向けのイベント構文

初心者向けのイベント構文では以下の様になっています。イベント名に続き()内に「イベントが発生したときに実行したい処理」をfunctionで設定します。

イベントの構文
$(セレクタ).イベント名(イベントが発生したときに実行したい処理)
※「イベントが発生したときに実行したい処理」はfunctionで設定します。

ここでイベントの構文をメソッドの構文と比較してください。名称が異なるだけで同じ構文なのが確認できると思います。これはjQueryがイベント発生時の処理をメソッドによって設定する仕組みを採用しているためです
つまりjQueryではメソッドによってイベントを設定します。

メソッドの構文
$(セレクタ).メソッド(引数)

初心者向けの構文で利用できる、イベントを設定するメソッドはたくさんあります。すべて覚える必要はありませんが、どのようなイベント(いつ)が利用できるかはリファレンスで確認しておいて下さい。
リファレンス:イベント目次 マウスイベントの「.click()」からロードイベントの「.ready()」までです。

clickイベントのサンプル

ここでは、数あるイベントの中からclickイベントのサンプルを紹介します。clickイベントが発生した時の処理を設定するのはclickメソッドです。サンプル(event1/01.html)のソースを開いて、body内にdiv要素が1つあることを確認してください。div要素の中はカラですが以下の様にcssが設定されているため、50pxの青い四角形として表示されます。

div{
	width:50px;
	height:50px;
	color:#fff;
	background-color:#09C;
}

jQueryは以下の様に記述され、オブジェクト(div要素)に対しclickメソッドを利用して、クリックされた時の処理を設定してます(処理はfunctionで設定します)。サンプルでは処理としてtestFuncが設定されています。

$(function () {
	$("div").click(testFunc);
});

testFuncは以下の様に記述され、textメソッドを利用してdiv要素内に「click!」とテキストを表示します。

function testFunc(){
	$("div").text("click!");
};

結果として、div要素をクリックするとdiv要素内に「click!」と表示されます。イベントを設定するメソッドは引数に無名関数を設定することができます。
→サンプル(event1/01b.html

$("div").click(function (){
	$("div").text("click!");
});

なぜ上級者向けのイベント構文を覚えないといけないのか?

初心者向けのイベント構文は、動的な要素(プログラムで後から追加された要素)に対応していません。そのため、インタラクティブなコンテンツでは対応できない場合があるのです。

サンプル(even1t/02.html)のソースを開いて、body内にdiv要素がないことを確認して下さい。しかしページ上にはdiv要素が表示されています。これは以下の4行目でappendメソッドを利用してdiv要素をbody内に追加しているためです。それ以外(1〜3行目)はevent/01b.htmlのjQueryと同じです。

$("div").click(function (){
	$("div").text("click!");
});
$("<div>").appendTo("body");

このサンプルではイベントの処理はevent/01b.htmlと同じなのに、div要素をクリックしても「click!」と表示されません。これはdiv要素がプログラムにより後から追加されたためです。このように初心者向けの構文は動的な要素に対応できないため、上級者向けのイベント構文も覚える必要があるのです。

ちなみに「後から追加」ではなく「先に追加」しておけば、初心者向けの構文でもイベントの処理が設定できます。サンプル(even1t/02b.html)を開いて、jQueryが以下の様に変更されているのを確認してください。

$("<div>").appendTo("body");
$("div").click(function (){
	$("div").text("click!");
});

先にdiv要素を追加(1行目)してからイベントの設定(2〜4行目)をするようにしました。とはいえ上級者向けのイベント構文は必要です。次回は動的な要素にも利用できる「上級者向けのイベント構文」について説明します。