【jQuery】一度だけイベントを実行する：one()メソッドについて

2023.06.11 / 2023.06.11

本記事ではjQueryで一度だけ実行するイベントの作成方法について解説していきます。

jQueryには一度だけイベントを実行するメソッドとしてone()メソッドが用意されています。何度も繰り返したくない処理に対してone()メソッドを使うことで、単発の処理とすることができます。

本記事を通して、jQueryで一度だけイベントを実行するone()メソッドについて理解を深めてください。

one()メソッドとは

one()メソッドは一度だけイベントを実行するjQueryのメソッドです。one()メソッドは主に以下構文に従って利用されます。

構文

$('セレクタ').one(イベント名[, セレクタ] [, データ], function(){
　　// 対象要素が指定したイベント発生時に実行する処理を記述
});

パラメーター	説明
イベント名	clickやmouseoverなどのイベントを指定
セレクタ	対象とするセレクタを指定
データ	イベントハンドラに渡すデータを指定

上記からわかるように、one()メソッドはon()メソッドと同じような構文で使います。

on()メソッドはイベントが発生すると何度でも処理を実行しますが、one()メソッドは一度だけ処理を実行するという違いがあります。うまく使い分けてください。

基本的にone()メソッドを使用するときはパラメーターのイベント名とイベントハンドラ（構文ではfunction(){}）を指定して、1度だけ実行される処理を記述します。

one()メソッドはボタンや画像のクリック時に動く処理に対して、一度だけイベントを発生させるような使い方ができます。

one()メソッドを使ったサンプルコードを以下に記します。

<button id='button'>ボタン</button>

<script>
$('#button').one('click', function() {
  alert("クリックされました");
});
</script>

上記サンプルコードはボタンが押されたらアラートを一度だけ表示する内容となっています。

one()メソッドに二つ以上のイベントを指定したい場合は、イベントとイベントの間に半角スペースを入れて指定します。

<button id='button'>ボタン</button>

<script>
$('#button').one('click mouseout', function() {
  alert("クリックまたはボタンからマウスが外されした");
});
</script>

上記のサンプルコードではボタンからマウスが外れる、またはクリックされるとアラートが表示されます。

以下サンプルコードのようにone()メソッドのパラメーターにセレクタを指定することで、対象セレクタを指定できます。

<button id='button'>ボタン</button>

<script>
$(document).one('click', '#button',function() {
  alert("クリックまたはボタンからマウスが外されした");
});
</script>

ちなみに上記サンプルコードの$(document).one()は、動的に追加された要素に対してもイベントを検知することができます。詳しくは以下記事をご参照ください。

本記事「【jQuery】一度だけイベントを実行する：one()メソッドについて」はいかがでしたか。

ぜひone()メソッドを使ってWebアプリケーションをよりよいものにしてください。