【jQuery】.one()メソッドで1度だけイベントを実行する

jQueryのone()メソッド

.one()は1度だけイベントハンドラを実行するメソッド

.one()はイベントが起きると1度だけイベントハンドラが実行され、その後でバインドが解除されるメソッドです。

.on()メソッドと同じように記述して使用できますが、.one()の場合はイベントハンドラが1度しか実行されないという点が異なります。

イベントハンドラのバインドが解除されているので、同じイベントが起きても2度目にはイベントハンドラは実行されません。

構文は以下の3種類あります。

.one(events [,data], handler)
.one(events [,selector] [,data], handler)
.one(events [,selector] [,data])

それぞれについて説明します。

.one(events [,data], handler)

events
クリックや送信などのイベント、もしくはカスタムイベントを表します。スペースで区切ることで複数のイベントを指定できます。
[,data]
イベントが起きたときに、イベントハンドラに渡すデータ。マップ形式のオブジェクトで指定します。
handler
イベントが起きた時に実行される関数。falseとすると単にfalseを返す関数のショートカットになります。

.one(events [,selector] [,data], handler)

events
クリックや送信などのイベント、もしくはカスタムイベントを表します。スペースで区切ることで複数のイベントを指定できます。
[,selector]
イベントをトリガーする要素の子孫をフィルターするセレクター。
[,data]
イベントが起きたときに、イベントハンドラに渡すデータ。マップ形式のオブジェクトで指定します。
handler
イベントが起きた時に実行される関数。falseとすると単にfalseを返す関数のショートカットになります。

.one(events [,selector] [,data])

events
キーがイベントで値がイベントハンドラのオブジェクト。キーとなるイベントはスペースで区切ることで複数指定できます。
[,selector]
イベントをトリガーする要素の子孫をフィルターするセレクター。
[,data]
イベントが起きたときに、イベントハンドラに渡すデータ。マップ形式のオブジェクトで指定します。

.one()の使い方

.one()の簡単な使い方を紹介します。

<button>ボタン</button>

上記のHTMLにおいて、次のようなJavaScriptを実行します。

$( "button" ).one('click', function(){
	alert('ボタンが押されました。');
});

ボタンをクリックするとアラートでメッセージが表示されます。2回目以降はボタンをクリックしても何も起きません。

.onで.oneと同じ動作をさせる方法

.on()を使用して.one()と同じような動作をさせることができます。

そのためには実行したい動作をさせた後に、要素からイベントハンドラを解除することで同じような動作になります。

<button>ボタン</button>

上記のHTMLにおいて、次のようなJavaScriptを実行します。

上記のHTMLにおいて、以下のJavaScriptを実行します。

$( "button" ).on('click', function(event){
	alert('ボタンが押されました。');
	$(this).off(event);
});

ボタンをクリックするとアラートでメッセージが表示され、次に.off()でイベントハンドラが解除されます。

そのためボタンをクリックしても2度目以降は何も起きません。

これで.on().one()と同じ動作をさせることができます。

[prism]