前回のJQueryの記事ではセレクタとメソッドについて解説しました。
今回は、新しく"イベント"について解説します。
一言でいうと、イベント = いつ（when） になります。
セレクタ ▶ 何を
メソッド ▶ どうする
イベント ▶ いつ(new)
例を使ってやってみましょう。
例：p要素のテキストをクリックすると背景が黄色になる。
ますはサンプルコードから
scriptタグの2行目にある「click」がイベントです。
このイベントにより、クリックしたとき（＝いつ）という指定が可能になります。
前回の復習も兼ねて、一行目から見ていきましょう。
1行目
これは、jQueryのドキュメントレディイベントを使用しています。ページのHTML=DOMが完全に読み込まれた時点で、内部の関数が実行されるように制御しています。
この記述を短縮したものでしたね。
2行目
セレクタ（＝何を） ページ内のすべての <p> 要素を選択します。
clickというイベント（＝いつ）が発生すると、匿名関数 function(){ ... } が実行される と書かれています。
※補足
匿名関数は、名前がない関数です。 関数については別の記事で解説します。
3行目
「this」は重要なキーワードで、文脈に応じて、異なるオブジェクトを参照します。今回は、イベント内でのthisについて説明します。
イベントでの this は、そのイベントが発生した要素を指します。つまり、どの要素がクリックされたか、あるいは他のイベントがトリガーされたかを示します。
今回の場合ですと、<p>要素が該当します。
つまり
は
と同じ意味になります。
cssメソッド(＝どうする）です。
ここで、背景色を黄色にする という指定がされています。
全体の流れ
①ドキュメントが完全に読み込まれた後、jQueryのドキュメントレディイベントが発動します。
②ドキュメント内のすべての <p> 要素にクリックイベントリスナーが設定されます。
③クリックされると、クリックされた <p> 要素の背景色が黄色に変更されます。
一応、実行結果を見ておきましょう。
はい。テキストをクリックしたと同時に、背景色が黄色になりました。
今回はイベントについて解説してみました。
次回は関数について解説してみるつもりです。
ではまた次回の記事でﾉｼ
.png)
