【jQuery】unbind()を使って設定したイベントを解除する!

設定したイベントの解除を行うにはjQueryのunbind()メソッドを使用します。

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

そして、unbind()にパラメータを指定することで、特定のイベントやイベントハンドラを解除することができたり、複数のイベントやイベントハンドラを解除することもできます。

また、unbind()はbind()だけでなく、on()で設定されたイベントも解除することが可能です。

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

⚫︎ 設定した単数のイベントを解除する場合
⚫︎ 設定した複数のイベントを解除する場合
⚫︎ 設定したイベントのイベントハンドラを解除する場合
⚫︎ 設定したイベントを全て解除する場合

⚫︎ unbind()でon()で設定したイベントを解除する方法

ハルトさん

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

さとみさん

お願いします!

unbind()とは

unbind()とは、セレクタにマッチする要素のイベントを解除するメソッドとなります。

unbind()の書き方

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

パラメータ

⚫︎ イベント名(任意):
解除したいイベント名を指定する(clickやmouseoverなど)
⚫︎ イベントハンドラ(任意):
解除したいイベントハンドラを指定する

unbind()メソッドのパラメータにイベント名を指定することで要素のイベントを解除することができます。
また、第2パラメータにイベントハンドラを指定すると、該当するイベントに割り当てられたイベントハンドラを解除することができます。

しかし、イベントハンドラに無名関数を指定した場合、イベントは解除されません。

設定したイベントを解除するサンプルコード

unbind()で設定したイベントを解除するサンプルコードを紹介します。

設定した単数のイベントを解除する場合

設定した単数のイベントを解除する場合はunbind()のパラメータにイベント名を指定します。

sample.html

style.css

index.js

出力結果

unbind()のパラメータにイベント名を指定することで設定した単数のイベントを解除することができます。
そのため、ボタンを押すと、クリックイベントが解除されます。

設定した複数のイベントを解除する場合

unbind()で設定した複数のイベントを解除する場合はunbind()メソッドのパラメータであるイベント名を半角空白空けて指定します。

sample.html

style.css

index.js

出力結果

unbind()のパラメータにイベント名を半角空白を空けて指定することで複数のイベントを紐づけています。
そのため、マウスを要素の上に持っていく場合と要素からマウスを離した場合には各要素のid名が表示されています。

設定したイベントのイベントハンドラを解除する場合

bind()で設定したイベントのイベントハンドラを解除する場合は第1パラメータにイベント名、第2パラメータにイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

unbind()の第1パラメータにイベント名、第2パラメータにイベントハンドラを指定することで設定したイベントのイベントハンドラを解除することができます。
そのため、ボタンを押すとクリックイベントが解除されますが、マウスオーバーのイベントは残ります。

さとみさん

unbind()の第1パラメータにイベント名、第2パラメータにイベントハンドラを指定することで設定したイベントのイベントハンドラを解除することができるのですね!

ハルトさん

そうですね。
しかし、イベントハンドラに無名関数を指定した場合はイベント解除が行われませので注意してください。

設定したイベントを全て解除する場合

設定したイベントを全て解除する場合はunbind()メソッドをパラメータ無しで使用します。

sample.html

style.css

index.js

出力結果

unbind()メソッドをパラメータ無しで使用することで指定した要素のイベントを全て解除することができます。
そのため、ボタンをクリックすると何も起きなくなります。

さとみさん

unbind()をパラメータ無しで使用すると設定されているイベントを全て解除することができるのですね!

ハルトさん

そうですね。
unbind()をパラメータには何も指定がありませんから、指定した要素に設定されているイベントが全て解除されます。

on()で設定したイベントをunbind()で解除する方法

on()で設定したイベントをunbind()で解除する方法を紹介します。

sample.html

style.css

index.js

出力結果

on()メソッドでイベントを設定した要素をunbind()メソッドで解除することができます。
そのため、要素をクリックやマウスを重ねると、アラートが発生しますが、ボタンを押すと何も起きなくなります。

今回のポイント

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

⚫︎ 設定したイベントを解除するにはjQueryのunbind()メソッドを使用する

⚫︎ unbind()で設定した単数のイベントを解除する場合は第1パラメータにイベント名を指定する

⚫︎ unbind()で設定した複数のイベントを解除する場合は第1パラメータにイベント名を半角空白で指定する

⚫︎ unbind()で設定したイベントハンドラを解除する場合は第1パラメータにイベント名を、第2パラメータにセレクタを指定する

⚫︎ unbind()で設定したイベントを全て解除する場合はunbind()をパラメータなしで使用する

⚫︎ unbind()はbind()だけでなくon()で設定したイベントを解除することができる

関連記事

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

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

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

Writer
壷井

壷井

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

最新の案件情報

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