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

jQuery逆引きリファレンス

一度だけ実行されるイベントリスナーを設置するには?(one)

2015年6月5日

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

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

 登録されたイベントリスナーを最初の一度だけ実行する、特別なメソッドがあります。それがoneメソッドです。例えば、クイズや占いの結果を得る場合など、何度も実行されては困るようなイベントリスナーを設置するために利用します。

 以下には、具体的な例として、簡単な占いサンプルを示します。[今日の運勢は?]ボタンをクリックすると、運勢メッセージが表示されます。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="btn">今日の運勢は?</button>
<div id="result"></div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  // 運勢メッセージを配列として準備
  var msgs = [
    '素晴らしい一日になること請け合い!',
    '今日は何か良いことがありそう',
    '良いことがあれば…いいなぁ',
    '運は心の持ちようです',
    '元気いっぱいな一日になりそう',
    '他人への感謝の気持ちを忘れずに',
    '今日は何か良いことがありそう',
    '元気よく挨拶すれば吉',
    '普通に無難な一日です',
    '足元に気を付けて!',
    '家にこもってゆっくりしましょう'
  ];

  // ボタンをクリックした時、ランダムで準備済みのメッセージを表示
  $('#btn').one('click', function(e) {
    $('#result').text(msgs[Math.round(Math.random() * 10)]); 
  });
});
</script>
</body>
</html>
oneメソッドを利用した「今日の運勢」の表示(one.html)
ボタンクリックでランダムに運勢メッセージを表示
ボタンクリックでランダムに運勢メッセージを表示

 oneメソッドの構文は、以下の通りです。別稿「Tips:イベントメソッドで提供されないイベントを処理するには?(on)」でも触れたonメソッドと同じ構文です。

[構文]oneメソッド

$(セレクター).one(イベント名, function(e) { ……イベント発生時の処理……
})

 イベントリスナーの配下では、Math.randomメソッドで010の値を生成し、その値に応じて配列の任意の要素(=運勢メッセージ)を取り出しています。

 サンプルを実行すると、確かに2回目以降のクリックでは処理は無視される(=メッセージは変化しない)ことが確認できます。

 太字の部分は、言うなれば、onメソッドで以下のように表すのと同じ意味です。clickイベントリスナーの初回実行時にoffメソッドでリスナーを破棄しているわけです。

JavaScript
$('#btn').on('click', function(e) {
  $('#result').text(msgs[Math.round(Math.random() * 10)]);
  $(this).off(e);
});
oneメソッドをonメソッドで置き換える例

複数のイベントリスナーをまとめて登録する

 oneメソッドでは「イベント名: イベントリスナー,……」のハッシュ形式で複数のイベントリスナーをまとめて設定することもできます。例えば以下は、上のサンプルを改良して、[今日の運勢は?]ボタンに対してmouseoverclickイベントリスナーを登録するコードです。マウスオーバーしたタイミングで、メッセージを表示します。

JavaScript
$('#btn').one({
  // マウスオーバー時にメッセージを表示
  'mouseover' : function(e) {
    $('#result').text('ボタンクリックは1回だけです');
  },
  // クリック時に運勢メッセージを表示
  'click' : function(e) {
    $('#result').text(msgs[Math.round(Math.random() * 10)]);
  }
});
mouseover/clickイベントリスナーを利用したメッセージの表示(one.html)
マウスオーバー時にもメッセージを表示するようになる(1回だけ)
マウスオーバー時にもメッセージを表示するようになる(1回だけ)

 これまた、onメソッドと同等の構文ですので、併せて別稿「Tips:イベントメソッドで提供されないイベントを処理するには?」も参照してみてください。

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

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

jQuery逆引きリファレンス
18. イベントリスナーを呼び出す際にパラメーターを引き渡すには?(data)

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

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

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

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

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

jQuery逆引きリファレンス
21. イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト)

クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。

jQuery逆引きリファレンス
22. イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)

イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。

サイトからのお知らせ

Twitterでつぶやこう!