Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

イベントに応じて処理を実行するには?(イベントメソッド)

2015年3月26日

イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説する。

  • このエントリーをはてなブックマークに追加

 イベントの発生に応じて呼び出される処理のかたまりのことを、イベントリスナーと言います。jQueryでは、イベントリスナーを手軽に実装するために、以下のような構文を提供しています。

[構文]イベントリスナー

$(セレクター式).イベント名(function(e) {
  ……イベントの発生に応じて呼び出される処理……
});

 イベントリスナーの引数に渡されている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 コンテキストメニューを表示する前
jQuery標準で利用可能なイベント

イベントリスナーの基本的な例

 個別のイベントでの用法については、別稿で解説予定なので、ここでは、まずは最も基本的なクリックイベントの例を示します。以下は、ボタンをクリックすることで、現在の時刻をボタンキャプションとして表示する例です(複数回クリックした場合は時刻を更新します)。

HTML
<!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>
clickイベントを利用した例(click.html)
[時刻表示]ボタンをクリック

[時刻表示]ボタンをクリック

ボタンクリックで現在時刻を表示
ボタンクリックで現在時刻を表示

 イベントリスナーの配下では、$(this)でイベントの発生元(ここではボタン)にアクセスできます*1。JavaScriptに慣れている人は、単にthisとしてしまわないように注意してください。thisが指すものはJavaScript標準の要素オブジェクトだからです。$()関数を介することで、これをjQueryオブジェクトに変換できます。イベントリスナーを記述する場合のイディオムなので、覚えておいてください。

  • *1 つまり$(this)は、この場合、$('#btn')と同じ意味であるということです。
処理対象:イベントリスナー カテゴリ:イベント

※以下では、本稿の前後を合わせて5回分(第13回~第17回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
13. 配列から特定の条件で要素を取り出すには?($.grep)

$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。

jQuery逆引きリファレンス
14. 配列の内容を検索するには?($.inArray)

$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。

jQuery逆引きリファレンス
15. 【現在、表示中】≫ イベントに応じて処理を実行するには?(イベントメソッド)

イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説する。

jQuery逆引きリファレンス
16. イベントメソッドで提供されないイベントを処理するには?(on)

onメソッドを利用して、jQueryが標準で対応していないJavaScriptイベントにアクセスする方法を説明する。

jQuery逆引きリファレンス
17. 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには?(on)

onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説。またjQuery 1.6以前のbind/live/delegateメソッドをonメソッドに置き換える方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!