jQuery逆引きリファレンス
イベントに応じて処理を実行するには？（イベントメソッド）
イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説する。
イベントの発生に応じて呼び出される処理のかたまりのことを、イベントリスナーと言います。jQueryでは、イベントリスナーを手軽に実装するために、以下のような構文を提供しています。
［構文］イベントリスナー
……イベントの発生に応じて呼び出される処理……
});
イベントリスナーの引数に渡されているeはイベントオブジェクトと呼ばれ、マウスの座標情報、押されたキーの種類など、イベントに関わるさまざまな情報を管理するためのものです。イベントリスナーの中で利用しない場合には、省略しても構いません。具体的な用法については、別稿「イベントが発生した時のマウス情報を取得するには？」などで解説します。
「イベント名」の部分で利用できるイベントには、以下のようなものがあります。
| イベント名 | 概要 |
|---|---|
| click | 要素をクリックした時 |
| dblclick | 要素をダブルクリックした時 |
| mousedown | マウスボタンを押した時 |
| mouseup | マウスのボタンを離した時 |
| mouseenter | 要素にカーソルが入った時 |
| mouseleave | 要素からカーソルが出た時 |
| mouseover | 要素にカーソルが乗った時 |
| mouseout | 要素からカーソルが外れた時 |
| mousemove | 要素内をカーソルが移動した時 |
| focus | 要素にフォーカスを当てた時 |
| blur | 要素からフォーカスを外した時 |
| focusin | 要素にフォーカスを当てた時（イベントバブリングあり） |
| focusout | 要素からフォーカスを外した時（イベントバブリングあり） |
| change | 要素の値を変更した（input、selectなど） |
| select | テキストボックス／テキストエリアのテキストを選択した時 |
| submit | フォームから送信した時 |
| keydown | キーを押した時 |
| keypress | キーを押し続けている時 |
| keyup | キーを離した時 |
| resize | ウィンドウのサイズを変更した時 |
| scroll | スクロールした時 |
| contextmenu | コンテキストメニューを表示する前 |
イベントリスナーの基本的な例
個別のイベントでの用法については、別稿で解説予定なので、ここでは、まずは最も基本的なクリックイベントの例を示します。以下は、ボタンをクリックすることで、現在の時刻をボタンキャプションとして表示する例です（複数回クリックした場合は時刻を更新します）。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="btn">時刻表示</button>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// ボタンクリックで時刻を更新
$('#btn').click(function(e) {
$(this).text((new Date()).toLocaleString());
});
});
</script>
</body>
</html>
|
［時刻表示］ボタンをクリック
イベントリスナーの配下では、$(this)でイベントの発生元（ここではボタン）にアクセスできます*1。JavaScriptに慣れている人は、単にthisとしてしまわないように注意してください。thisが指すものはJavaScript標準の要素オブジェクトだからです。$()関数を介することで、これをjQueryオブジェクトに変換できます。イベントリスナーを記述する場合のイディオムなので、覚えておいてください。
- *1 つまり
$(this)は、この場合、$('#btn')と同じ意味であるということです。
※以下では、本稿の前後を合わせて5回分（第13回～第17回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
13. 配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
14. 配列の内容を検索するには？（$.inArray）
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
15. 【現在、表示中】≫ イベントに応じて処理を実行するには？（イベントメソッド）
イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説する。
17. 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには？（on）
onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説。またjQuery 1.6以前のbind／live／delegateメソッドをonメソッドに置き換える方法も説明する。
