ITコラム

プログラミングノウハウ

2018.11.20

#jQuery入門

jQuery【one】一度だけ実行するoneメソッド

jQuery の one メソッドは、on メソッドと同じように記述して使用しますが、バインドしたイベントを一度だけ実行するメソッドです。
今回は、jQuery の one メソッドの使い方を解説いたします。

※on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. one メソッド
2. one と on の違い
3. まとめ

1. one メソッド

　
one メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).one( events [, data], handler(eventObject) );

$(セレクタ).one( events [, selector] [, data], handler(eventObject) );

$(セレクタ).one( events-map [, selector] [, data] );

one メソッドの引数の内容は、それぞれ以下の通りです。

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

events
「 click 」、「 keydown.myPlugin 」、「 .myPlugin 」などのイベント名、または任意に定義したカスタムイベント名の文字列を指定複数のイベントを指定可能（スペース区切り）
data
イベントハンドラに渡したいデータをマップ値で指定
handler(eventObject)
紐付けたい関数を指定するか、「 false 」を指定「 false 」を指定すると、単に false を返すだけの関数が自動的に紐付けられる

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

events
「 click 」、「 keydown.myPlugin 」、「 .myPlugin 」などのイベント名、または任意に定義したカスタムイベント名の文字列を指定複数のイベントを指定可能（スペース区切り）
selector
one メソッドの対象となるセレクタと同じセレクタを指定
data
イベントハンドラに渡したいデータをマップ値で指定
handler(eventObject)
紐付けたい関数を指定するか、「 false 」を指定「 false 」を指定すると、単に false を返すだけの関数が自動的に紐付けられる

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

events-map
マップ値と組み合わせてイベントハンドラを指定キーには、「 click 」、「 keydown.myPlugin 」、「 .myPlugin 」などのイベント名、又は任意に定義したカスタムイベント名の文字列を指定複数のイベントを指定可能（スペース区切り）値には、事前に紐付けられた関数を指定
selector
one メソッドの対象となるセレクタと同じセレクタを指定
data
イベントハンドラに渡したいデータをマップ値で指定

※イベントハンドラとは、イベントが発生した時に呼び出される処理のことです。

▲目次へ戻る

2. one と on の違い

　
one メソッドを使用した場合と on メソッドを使用した場合とで、クリック時のカウント処理を比較します。
各ボタンを何度かクリックしてみて下さい。

　カウント　:　　

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {

  let num = 0;
  let num2 = 0;

  $("#btn1").one("click", function() {
    num++;
    $("#spn1").text(num);
  });

  $("#btn2").on("click", function() {
    num2++;
    $("#spn2").text(num2);
  });
});
</script>

<div style="background-color:#CCC; padding:20px 20px 5px;">
  <input type="button" id="btn1" value=" one " style="width:70px;">　カウント　:　<span id="spn1">　</span>

  <input type="button" id="btn2" value=" on " style="width:70px;">　カウント　:　<span id="spn2">　</span>
</div>

on メソッドを使用すると、ボタンをクリックする度にカウントアップ処理をするイベントが実行されますが、one メソッドを使用すると、同イベントが一度だけ実行されることがわかります。

▲目次へ戻る