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

jQuery逆引きリファレンス

イベントリスナーを呼び出す際にパラメーターを引き渡すには?(data)

2015年5月7日

イベントメソッドやonメソッドの呼び出し時に、任意のパラメーターを引き渡す方法を解説する。

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

 イベントリスナーを呼び出す際に、呼び出し側(=イベントメソッドやonメソッド)から任意のパラメーターを引き渡すこともできます。パラメーターを利用することで、処理そのものは共通で、処理の対象や値だけが異なるようなイベントリスナーをいくつも用意する必要はありません。パラメーターを差し替えるだけで、1つのイベントリスナーの挙動を用途に応じて振り分けることができます*1

 それではさっそく、具体的なサンプルを見てみましょう。以下は、それぞれ押されたボタンに応じて、「「●○」です。」という文字列をダイアログ表示する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div>
  jQueryで対応するメソッド名は?<br />
  <button id="btn1">イベントリスナーを設定</button>
  <button id="btn2">アニメーションを設定</button>
  <button id="btn3">要素にスタイルを追加</button>
  <button id="btn4">要素の属性を設定</button>
  <button id="btn5">要素のプロパティを設定</button>
</div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  // 2methodパラメーターの値に応じてメッセージを表示
  var onclick = function(e) {
    window.alert('「' + e.data.method + '」です。');
  };

  // 1それぞれのボタンにイベントリスナーを設定
  $('#btn1').click({ method: 'on' }, onclick);
  $('#btn2').click({ method: 'animate' }, onclick);
  $('#btn3').click({ method: 'css' }, onclick);
  $('#btn4').click({ method: 'attr' }, onclick);
  $('#btn5').click({ method: 'prop' }, onclick);
});
</script>
</body>
</html>
押されたボタンに応じて、対応するメッセージを表示(data.html):イベントメソッドのパラメーターの例
ボタンに対応するメソッド名をダイアログ表示(1):[イベントリスナーを設定]をクリック
ボタンに対応するメソッド名をダイアログ表示(2):[要素にスタイルを追加]をクリック

 イベントリスナーに渡すべきパラメーターは、clickmouseoverなどのイベントメソッドの第1引数に「パラメーター名: 値,……」のハッシュ形式で指定します(1)。この例であれば、唯一のパラメーターとしてmethodを渡していますが、もちろん、複数のパラメーターを渡したいならば、ハッシュに対して複数のキーを列記してください。

 また、onメソッドでも、以下のようにすることで、同様にパラメーターを引き渡すことができます。

JavaScript
$('#btn1').on('click', { method: 'on' }, onclick);
onメソッドのパラメーターの例

 イベントリスナーは、前掲の別稿では匿名関数として渡していましたが、ここでは複数の箇所から参照する必要がありますので、2のように別に関数オブジェクトとして用意しておき、イベントメソッド/onメソッドには変数として引き渡します。

 イベントメソッド/onメソッド経由で渡されたパラメーターを取得するのは太字の部分、イベントオブジェクトのdataプロパティの役割です。「e.data.パラメーター名」でアクセスできます。

処理対象:イベントリスナー カテゴリ:イベント
API:.on() カテゴリ:Events(イベント) > Event Handler Attachment

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

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

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

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

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

jQuery逆引きリファレンス
18. 【現在、表示中】≫ イベントリスナーを呼び出す際にパラメーターを引き渡すには?(data)

イベントメソッドやonメソッドの呼び出し時に、任意のパラメーターを引き渡す方法を解説する。

jQuery逆引きリファレンス
19. マウスポインターが要素に出入りした時の処理を実装するには?(mouseover、mouseout、mouseenter、mouseleave、hover)

違いが分かりにくい「mouseover/mouseout」と「mouseenter/mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。

jQuery逆引きリファレンス
20. 一度だけ実行されるイベントリスナーを設置するには?(one)

登録されたイベントリスナーを最初の一度だけ実行するoneメソッドの基本的な使い方を解説する。

サイトからのお知らせ

Twitterでつぶやこう!