【jQuery】off()を使ってイベントの解除を行う!

要素にイベントの解除を行うにはjQueryのoff()メソッドを使用します。

jQueryのoff()メソッドとはでセレクタにマッチする要素のイベントを解除するメソッドであり、on()メソッドでイベント設定された要素のイベントを発生させないようにすることができます。

そして、off()にパラメータを指定することで、特定の要素のみのイベントを解除することも可能です。

また、イベントを解除させるにはunbind()もありますが、unbind()メソッドはbind()でイベントを紐付けられている要素を解除する際に使用するので、on()のイベントを解除する際には使用することはあまりありません。

今回は、jQueryのoff()メソッドを使って要素にイベントの解除を行う方法について以下の内容で解説していきます。

⚫︎ 要素に単数のイベントの解除を行う場合
⚫︎ 要素に複数のイベントの解除を行う場合
⚫︎ 特定要素のイベントの解除を行う場合

⚫︎ イベントが重複しないようにする方法

ハルトさん

今回はjQueryのoff()メソッドで要素にイベントを紐づける方法について説明していきます。

さとみさん

お願いします!

off()とは

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

off()の書き方

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

パラメータ

⚫︎ イベント名:
解除したいイベント名を指定する(clickやmouseoverなど)
⚫︎ セレクタ(任意):
イベントを解除したい特定のセレクタを指定する

off()メソッドのパラメータにイベント名を指定することで要素のイベントを解除することができます。
また、第2パラメータにセレクタを指定すると、特定要素のみのイベントを解除することができます。

イベントの解除を行うサンプルコード

off()で要素にイベントの解除を行うサンプルコードを紹介します。

要素に単数のイベントの解除を行う場合

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

sample.html

style.css

index.js

出力結果

off()のパラメータにイベントを指定することで要素の単数のイベントを解除しています。
そのため、マウスを要素の上でクリックすると、アラートが表示されますが、ボタンを押した後にマウスを要素の上でクリックすると、アラートが表示されなくなります。

要素に複数のイベントの解除を行う場合

off()で要素に複数のイベントの解除を行う場合はoff()メソッドの引数であるイベント名を半角空白で指定します。

sample.html

style.css

index.js

出力結果

off()のパラメータにイベント名を半角空白を空けて指定することで要素に複数のイベントを解除しています。
そのため、マウスを要素の上に持っていく場合と要素からマウスを離した場合にはアラートが発生しますが、ボタンを押した後はアラートが表示されません。

特定要素のイベントの解除を行う場合

特定要素のイベントの解除を行う場合off()の第2パラメータにセレクタを指定します。

sample.html

style.css

index.js

出力結果

off()のパラメータにセレクタを指定することで、特定要素のイベントを解除することができます。
その為、イベント削除のボタンを押すとsample2クラス要素の背景色が変化しません。

さとみさん

off()メソッドのパラメータにセレクタを指定することで、特定要素のイベントを解除することができるんですね!

ハルトさん

そうですね。
off()メソッドの第2パラメータにセレクタを指定することで、セレクタのイベントを解除することができます。
その為、「この要素だけイベントを解除したい」という場合に使用します。

さとみさん

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

ハルトさん

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

イベントが重複しないようにする方法

プラグインなどでイベントが重複しないようにする際、名前空間を持つイベントを指定することができます。

この場合、下記のようにイベント名を「.」(ドット)で区切って名前空間を指定しておけばプラグインで使用しているイベントのみ解除することができます。

このようにすると他のプログラムで設定されているイベントに影響与えずイベントの設定や解除を行うことができます。

今回のポイント

off()で要素のイベントを解除

⚫︎ 要素にイベントを解除するにはjQueryのoff()メソッドを使用する

⚫︎ off()で要素に単数のイベントを解除する場合はoff()メソッドのパラメータにイベント名を指定する

⚫︎ off()で要素に複数のイベントを解除する場合はoff()メソッドのパラメータにイベント名を半角空白で指定する

⚫︎ off()で特定要素のイベントの解除を行う場合は第2パラメータにセレクタを指定する

⚫︎ イベントの解除が重複しないようにするにはイベント名を「.」(ドット)で区切って名前空間を指定する

関連記事

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

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

Writer
壷井

壷井

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

最新の案件情報

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