【jQuery】one()を使って1回だけ実行するイベントを設定する!

要素に1回だけ実行するイベントを設定するにはjQueryのone()メソッドを使用します。

jQueryのone()メソッドとはセレクタにマッチする要素にイベントを1回だけ紐づけるメソッドであり、ボタンや画像などをクリックした際に1回だけイベントを発生させることができます。

イベントを設定するメソッドはbind()メソッドやon()メソッドがありますが、それたのメソッドと同じように複数のイベントを設定したり、イベントデータをイベントハンドラに渡してイベントを設定することができます。

また、one()メソッドはbind()メソッドやon()メソッドと比べて「イベント発生の回数が1回」という制限があることから、要素にイベントを一回だけ実行させたい場合にone()メソッドを使用します。

今回は、jQueryのone()メソッドを使って1回だけ実行するイベントを設定する方法について以下の内容で解説していきます。

⚫︎ 既にある要素に1回だけ実行する単数のイベントを設定する場合
⚫︎ 既にある要素に1回だけ実行する複数のイベントを設定する場合
⚫︎ 後付けで1回だけ実行するイベントを設定する場合
⚫︎ イベントハンドラにデータを渡して1回だけ実行するイベントを設定する場合

ハルトさん

今回はjQueryのone()メソッドで1回だけ実行するイベントを設定する方法について説明していきます。

さとみさん

はい!
お願いします!

one()とは

one()とは、セレクタにマッチする要素にイベントを1回だけ紐づけるメソッドとなります。

one()の書き方

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

パラメータ

⚫︎ イベント名:
イベント名を指定する(clickやmouseoverなど)
⚫︎ セレクタ(任意):
イベントを割り当てたいセレクタを指定する
⚫︎ オブジェクトデータ(任意):
イベントオブジェクトに渡すデータを指定する(オブジェクトリテラル式で指定)
⚫︎ イベントハンドラ:
イベントのアクションを関数で指定する

one()メソッドのパラメータにイベント名とイベントハンドラを指定することで1回だけ実行するイベントを設定することができます。
また、パラメータにセレクタを指定すると、指定したセレクタに後付けでイベントを設定することができ、オブジェクトデータを指定すると、イベントオブジェクトにデータ渡した状態で要素に1回だけ実行するイベントを設定することができます。

1回だけ実行するイベントを設定するサンプルコード

one()で1回だけ実行するイベントを設定するサンプルコードを紹介します。

既にある要素に1回だけ実行する単数のイベントを設定する場合

既にある要素に単数のイベントの設定を行う場合はone()のパラメータにイベント名とイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

one()のパラメータにイベント名とイベントハンドラを指定することで要素に単数のイベントを紐づけています。
そのため、要素をクリックすると、要素の背景色が変更され、ボタンをクリックすると要素全体の背景が変更され、2回目以降は実行されなくなります。

既にある要素に1回だけ実行する複数のイベントを設定する場合

one()で要素に複数のイベントを紐づける場合はone()メソッドの第1パラメータであるイベント名を半角空白で指定します。

sample.html

style.css

index.js

出力結果

one()のパラメータのイベント名に半角空白を空けて指定することで要素に複数のイベントを紐づけています。
そのため、要素をクリックする場合と要素からマウスを離した場合にはアラートが表示され、2回目以降は実行されなくなります。

さとみさん

one()のone()のパラメータのイベント名に半角空白を空けて指定することで要素に複数のイベントを設定することができるんですね!

ハルトさん

そうですね。
複数のイベントを設定できますけど、同じ挙動になります。
もし、複数のイベントに別々の挙動を設定したい場合は、one()のパラメータに{イベント名1: イベントハンドラ1, イベント名2: イベントハンドラ2}のようにマップ値を指定してあげると良いですよ。

後付けで1回だけ実行するイベントを設定する場合

one()で後付けで1回だけ実行するイベントを設定する場合は第2パラメータにセレクタを指定します。

sample.html

style.css

index.js

出力結果

one()で、第2パラメータにオブジェクトデータを指定することで要素にイベントデータを受け渡してイベントを紐づけることができます。
そのため、要素をクリックすると、第2パラメータで指定したオブジェクトデータをイベントハンドラに渡して表示されていますが、2回目以降は実行されなくなります。

さとみさん

one()の第2パラメータにセレクタを指定することで後からセレクタにイベントを設定することができるんですね!

ハルトさん

そうですね。
one()は第2パラメータにセレクタを指定すると、そのセレクタにイベントを紐付けることができます。

イベントハンドラにデータを渡して1回だけ実行するイベントを設定する場合

イベント発生中にデータを渡す場合はone()メソッドの第2パラメータにオブジェクトデータで指定します。

sample.html

style.css

index.js

出力結果

one()メソッドのパラメータをオブジェクトデータで指定することでイベント発生中にデータを渡すことができます。
そのため、要素をクリックするオブジェクトデータが表示され、2回目以降は実行されなくなります。

今回のポイント

one()でイベント設定を行う

⚫︎ 1回だけ実行するイベントを設定するにはjQueryのone()メソッドを使用する

⚫︎ 既にある要素に1回だけ実行する単数のイベントを紐づける場合はone()のパラメータにイベント名とイベントハンドラを指定する

⚫︎ 既にある要素に1回だけ実行する複数のイベントを紐づける場合はone()メソッドの引数であるイベント名を半角空白で指定する

⚫︎ 後付けで1回だけ実行するイベントを設定する場合は第2パラメータにセレクタを指定する

⚫︎ イベントハンドラにデータを渡して1回だけ実行するイベントを設定する場合は第2パラメータにオブジェクトデータを指定する

関連記事

jQueryのbind()メソッドで要素にイベントを紐づける方法についてはこちらをご参考ください。

jQueryのon()メソッドで要素のイベントを設定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し