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

colmun_main12548

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

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

目次

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

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() {

  var num = 0;
  var 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 メソッドを使用すると、同イベントが一度だけ実行されることがわかります。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です