【jQuery】one()で要素にイベント処理を1回だけ実行するよう設定する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年08月29日に投稿されました。)

jQueryで要素にイベント処理を1回だけ実行するよう設定するにはone()を使用します。

one()とはセレクタにイベント処理を1回だけ紐づけるメソッドであり、ボタンなどをクリックした際に一度だけ処理を発生させることができます。

1回だけイベントを発生させることができることから、2回目は発生しませんのでご注意ください。

また、one()はイベント発生時にイベント情報の受け渡しやセレクタのフィルタリング、オブジェクトデータの受け渡しなど様々な機能があるため、利便性がとても高いです。

1回だけに制限することは2重のイベント発生の防止に繋がるため、もしjQueryで要素にイベントを1回だけ実行させたい場合にはone()を使用するようにしましょう。

今回は、jQueryのone()で要素にイベント処理を1回だけ実行するよう設定する方法について紹介していきます。

この記事はこんな方におすすめ

要素へのイベント発生の回数を1回に制限したい場合

要素にイベント処理を設定したい場合

one()とは

one()とはセレクタにイベント後の処理を一度だけ紐づけるメソッドとなります。

一度だけ紐づけるため、2回目以降のイベント処理は実行されなくなります。

one()の書き方

one()の書き方は下記となります。

セレクタの後ろにone()を追記し、必須な引数を2つを指定して使用します。

また、任意な引数を2つ追加して指定することができ、合計4つの引数を指定して使用することができます。

one()の引数

one()の引数は下記のようになります。

  1. イベント:(必須)
    イベント名を指定する
    (clickやloadなど)
  2. セレクタ(任意)
    イベントを割り当てたいセレクタを指定する
    (フィルタリングする)
  3. オブジェクトデータ(任意)
    イベントオブジェクトに渡すデータをオブジェクトで指定する
  4. イベントハンドラ:(必須)
    イベント発生後の処理を関数で指定する:

one()は、必須な引数として「イベント」や「イベントハンドラ」を指定します。

また、任意な引数として「セレクタ」や「オブジェクトデータ」を指定することができます。

one()で要素にイベント処理を1回だけ実行するよう設定するサンプルコード

one()で要素にイベント処理を1回だけ実行するよう設定するサンプルコードをご紹介します。

イベントの種類はたくさんありますが、ここでは厳選した下記の2パターンでone()を使用します。

  1. イベントを1つだけ設定する場合
  2. イベントを複数設定する場合

イベントを1つだけ設定する場合

one()でイベントを1つだけ設定するには引数にイベントを指定します。

イベントを設定することで、発動するトリガーを指定することができます。

● index.html

● style.css

● main.js

実行結果

one()で1つのイベント処理を1回だけ実行した結果

one()によって要素にイベント処理を1回だけ実行するよう設定しています。

そのため、要素をクリックすると背景の色が変化し、カウントされますが、2回目以降はカウントされません。

イベントを複数設定する場合

イベントを複数設定して要素にイベント処理の設定を行うにはone()のイベントに半角空白を空けてイベント名を指定します。

こちらは複数のイベントから1回ではなく、1度ずつそれぞれのイベントを実行することができます。

● index.html

● style.css

● main.js

実行結果

one()で複数のイベント処理を1回だけ実行した結果

one()によって要素に複数のイベント処理を1回だけ実行するよう設定しています。

そのため、要素をクリックすると背景の色が変化し、カウントされますが、2回目以降はカウントされていません。

one()のイベントハンドラに引数を指定する場合

one()のイベントハンドラに引数を指定することで、処理中にイベント情報を渡すことができます。

イベント情報とは、実際に行われたイベント名やオブジェクト名などが記載されたデータであり、オブジェクト形式として渡されます。

● index.html

● style.css

● main.js

実行結果

one()のイベントハンドラに引数を指定してイベント処理を行った結果

one()でイベントハンドラに引数を指定してイベント発生時に処理を行っています。

そのため、要素をクリックしたりマウスが入ると色が変化し、そのタイミングでイベント情報であるイベント名やタイムスタンプが表示されています。

one()でセレクタのフィルタリングを行ってイベント処理を1回だけ実行するよう設定する場合

one()でセレクタのフィルタリングを行って要素にイベント処理の設定を行うには、one()に「セレクタ」を指定します。

セレクタを指定することで、イベント発生の対象オブジェクトを厳選することができます。

● index.html

● style.css

● main.js

実行結果

one()でセレクタのフィルタリングを行ってイベント処理を1回だけ実行するよう設定した結果

one()でフィルタリングを行ってイベント発生時に処理を行っています。

そのため、「ret1」と「ret2」と「ret3」の要素にマウスをかぶせると「ret2」クラスの要素のみ要素の色が変化しています。

one()でデータの受け渡しを行ってイベント処理を1回だけ実行するよう設定する場合

one()ででデータの受け渡しを行ってイベント処理を1回だけ実行するよう設定するには引数に「オブジェクトデータ」を指定します。

オブジェクトデータを指定することで、指定したオブジェクトデータをイベント発生のタイミングで受け渡すことができます。

● index.html

● style.css

● main.js

実行結果

one()でデータの受け渡しを行ってイベント処理を1回だけ実行するよう設定した結果

one()でデータの受け渡しを行ってイベント発生時に処理を行っています。

そのため、要素をダブルクリックすると、オブジェクトの値である「山田太郎」と「dblclickイベント発生」という文字列が画面に表示されています。

one()を使用した実際のケース

one()を使用した実際のケースについてご紹介します。

例えば、フォームの送信ボタンをダブルクリックすると、リクエストが何度も飛んでしまうことがあるため、それを防止するようなコードを作成します。

● main.js

● main.js

● result.html

実行結果

one()でフォームの送信ボタンの二重クリックを防止するコードを作成した結果

one()でフォームの送信ボタンの二重クリックを防止しています。

そのため、ボタンを一度押すとフォームが送信されますが、送信中にボタンを押すとアラートが表示されています。

JavaScriptで要素にイベント処理を1回だけ実行するよう設定する場合

JavaScriptでイベント処理の設定を行う場合はaddEventListener()にonceを指定して使用します。

addEventListener()とは、イベントが発生した際に処理を実行するよう設定できるメソッドになります。

そして、onceとは、イベントの発動を一回のみにするかしないかを設定するオプションになります。

そのため、onceをtrueに指定することでイベント処理を一度だけに設定することができます。

● index.html

● style.css

● main.js

実行結果

addEventListener()で要素にイベント処理を1回だけ実行するよう設定した結果

addEventListener()でイベント発生時に処理を行っています。

そのため、マウスが要素内で移動すると要素の色がランダムで変化しています。

もし、addEventListener()について詳しく知りたい場合は下記の記事をご参考ください。

jQueryで要素にイベント処理を設定するメソッドの一覧

jQueryで要素にイベント処理を設定するメソッドの一覧についてご紹介します。

on()

on()とは、セレクタにイベント後の処理を紐づけるメソッドとなります。

on()の引き数である「イベント」を設定することでイベント処理の設定を行うことができます。

● index.html

● style.css

● main.js

実行結果

on()で要素にイベント処理を設定した結果

on()でイベント発生時に処理を行っています。

そのため、要素をクリックするとサイズが小さくなってきます。

もし、on()について詳しく知りたい場合は下記の記事をご参考ください。

bind()

bind()とは、要素にイベントを紐づけるメソッドになります。

bind()の引き数である「イベント」を設定することでイベント処理の設定を行うことができます。

● main.js

● style.css

● main.js

実行結果

bind()で要素にイベント処理を設定した結果

bind()でイベント発生時に処理を行っています。

そのため、要素をクリックすると要素のサイズが大きくなっています。

もし、bind()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ one()とはセレクタにイベント後の処理を紐づけるメソッドである。

⚫︎ one()は下記の引数を指定して使用する
・イベント(必須)
・セレクタ(任意)
・オブジェクトデータ(任意)
・イベントハンドラ(必須)

⚫︎ イベントを複数設定してイベント処理の設定を行うにはone()のイベントに半角空白を空けてイベント名を指定する。

⚫︎ one()のイベントハンドラに引数を指定するとイベント情報のデータをオブジェクトで引き渡される。

⚫︎ one()でセレクタのフィルタリングを行ってイベント処理の設定を行うには引数にセレクタを指定する。

⚫︎ one()でデータの受け渡しを行ってイベント処理の設定を行うには引数にオブジェクトデータを指定する。

⚫︎ JavaScriptで要素のクリック時に処理を行うにはaddEventListener()にonceを指定して使用する。

⚫︎ jQueryで要素のイベント処理の設定を行うメソッドはone()以外にも下記のメソッドがある。
・on()
・bind()