jQuery逆引きリファレンス
一度だけ実行されるイベントリスナーを設置するには？（one）
登録されたイベントリスナーを最初の一度だけ実行するoneメソッドの基本的な使い方を解説する。
登録されたイベントリスナーを最初の一度だけ実行する、特別なメソッドがあります。それがoneメソッドです。例えば、クイズや占いの結果を得る場合など、何度も実行されては困るようなイベントリスナーを設置するために利用します。
以下には、具体的な例として、簡単な占いサンプルを示します。［今日の運勢は？］ボタンをクリックすると、運勢メッセージが表示されます。
|
<!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メソッドの構文は、以下の通りです。別稿「Tips：イベントメソッドで提供されないイベントを処理するには？（on）」でも触れたonメソッドと同じ構文です。
［構文］oneメソッド
})
イベントリスナーの配下では、Math.randomメソッドで0～10の値を生成し、その値に応じて配列の任意の要素（＝運勢メッセージ）を取り出しています。
サンプルを実行すると、確かに2回目以降のクリックでは処理は無視される（＝メッセージは変化しない）ことが確認できます。
太字の部分は、言うなれば、onメソッドで以下のように表すのと同じ意味です。clickイベントリスナーの初回実行時にoffメソッドでリスナーを破棄しているわけです。
|
$('#btn').on('click', function(e) {
$('#result').text(msgs[Math.round(Math.random() * 10)]);
$(this).off(e);
});
|
複数のイベントリスナーをまとめて登録する
oneメソッドでは「イベント名: イベントリスナー,……」のハッシュ形式で複数のイベントリスナーをまとめて設定することもできます。例えば以下は、上のサンプルを改良して、［今日の運勢は？］ボタンに対してmouseover／clickイベントリスナーを登録するコードです。マウスオーバーしたタイミングで、メッセージを表示します。
|
$('#btn').one({
// マウスオーバー時にメッセージを表示
'mouseover' : function(e) {
$('#result').text('ボタンクリックは1回だけです');
},
// クリック時に運勢メッセージを表示
'click' : function(e) {
$('#result').text(msgs[Math.round(Math.random() * 10)]);
}
});
|
これまた、onメソッドと同等の構文ですので、併せて別稿「Tips：イベントメソッドで提供されないイベントを処理するには？」も参照してみてください。
API：.one() カテゴリ：Events（イベント） > Event Handler Attachment
※以下では、本稿の前後を合わせて5回分（第18回～第22回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
19. マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。
20. 【現在、表示中】≫ 一度だけ実行されるイベントリスナーを設置するには？（one）
登録されたイベントリスナーを最初の一度だけ実行するoneメソッドの基本的な使い方を解説する。
21. イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
22. イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
