jQueryイベント系メソッド（イベントハンドラ）の基本の書き方

今回は、ユーザーの動きに合わせて動く（発火）プログラム、イベント系メソッド（イベントハンドラ）の基本の書き方について記載してみます。

「イベント系メソッドってなに？」や「イベントハンドラ？」などの疑問に対して、初心者でも分かりやすいように、サンプルコードを用いて詳しく記載してみようと思います。

という事で、それでは今回はッ、

・動きに合わせて動くイベント系メソッド（イベントハンドラ）とは
・イベント系メソッドの基本の記述方法
・イベント系メソッドのまとめ

上記について記載していこうと思います…。

動きに合わせて動くイベント系メソッド（イベントハンドラ）とは

CSS系メソッドや、HTML系メソッド、そしてアニメーション系のメソッドなどを前回まで記載してきましたが、前回までのサンプルではブラウザを開いた瞬間（正確にはドキュメントを読み込が終った直後）に、jQueryが処理を実行していました。

しかし、実際にユーザーがWebページを閲覧する際、プログラムで処理を実行する際に、何らかのきっかけを与えてあがることがほとんどです。「ユーザーがクリックしたら」や、「ここにマウスを乗せたら」といった具合になります。そのきっかけを指定するためのメソッドが、イベント系メソッドで、イベントハンドラは、イベント系メソッド以外のメソッドの()の中のパラメータがイベントハンドラになり、イベント系メソッドで操作するものになります。

イベント系メソッドの基本の記述方法

イベント系メソッドの記述方法を紹介いたします。
今までjQueryの基本構文は、下記のような形になりました。

$(“セレクタ”).メソッド(パラメータ);
　↑要素を指定　↑何かをする

セレクタで要素を指定して、その要素に対してメソッドで処理をしてきました。しかし、イベント系メソッドを使うときは少し記述方法が異なります。

$(“セレクタ”).イベント系メソッド(イベントハンドラ);

今までのメソッドの()の中には、パラメータを指定してきました。しかし、イベント系メソッドでは、イベントハンドラを記述することになります。

イベントハンドラというと、少し難しいように感じますが、ハンドラを「ハンドル」と読み替えてみますと、意味がよく分かるかと思います。自動車や自転車についているハンドルは、自動車などを操作するものです。イベントハンドラというのは、イベント系メソッドで操作するもの、といった意味であることが理解できることと思います。

その実際の操作は、CSS系メソッドでスタイルを変更したり、アニメーション系メソッドでアニメーションさせたり、という部分が上記の「イベントハンドラ」の部分に入ります。

それでは分かりやすいように、サンプルコードを記載してみます。

サンプルソース<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#haedline”).click(function(){
$(“#haedline”).text(“クリックされました！”);
});
});
</script>
</head>
<body>
・・省略・・
<h2 id=”haedline”>クリックしてください！</h2>
・・省略・・
</body>
</html>