ITコラム

jquery one

jQuery

2018.11.20

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

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.