jQueryのoff()を使いこなす

jQueryにはバインディングしたイベントを取り除くoffメソッドがありますがこれは影響範囲を考慮せず利用すると想定しないイベントまで取り除いてしまいます。

イベントを限定する

例えば以下のように#barにclickイベントとmouseoverイベントがバインディングされてるとします。

$("#bar").click(function(){...(中略)...});
...
(中略)
...
$("#bar").mouseover(function(){...(中略)...});

ある条件の場合、clickイベントが不要なケースで単純に「$("#bar").off()」とするとclickイベントもmouseoverイベントも取り除かれてしまいます。
そういったケースを防ぐ為にイベントを引数で指定します。

$("#bar").off("click");

そうすることで指定したイベントのみを取り除くことができます。

名前空間を限定する

上記の対応でも完全ではありません。上記で#barにバインディングされていたのはclickイベントとmouseoverイベントでしたが、これがclickイベント２つだとかだと両方のclickイベントが取り除かれてしまいます。

また、アクセス解析のツールがイベントを勝手にバインディングしている可能性もあり、基本的にあなたが把握していないイベントがバインディングされている可能性があることを前提にコードを書かなくてはいけません。

その為に利用するのが名前空間(Namespace)です。

名前空間とはプログラミング用語で、特定の処理に名前をつけることで他の名前と区別を行い処理の衝突を防ぐ方法です。今回はイベントに対して名前空間を設定します。

名前空間はイベント設定時に指定でき、onメソッドで以下のようにイベント名を"event.namespace"とすることでイベントに対して名前を付けることができます。

$("#bar").on("click.modal_close",function(){...(中略)...});
...
(中略)
...
$("#bar").on("click.data_set",function(){...(中略)...});

今回は#barに対して「modal_close」と「data_set」と名前を付けたclickイベントを設定しています。

そうすることでイベントを取り除く際に名前空間を指定することで指定したイベントのみを取り除くことができます。

$("#bar").off("click.modal_close");

上記のケースでは「modal_close」の名前空間をもつclickイベントのみを取り除いています。

イベントデリゲート時に利用する

(イベントデリゲートに関しては「イベントデリゲートで理解するjQueryのonメソッド」を参考にしてください)

イベントデリゲート時にも名前空間が指定できます。

$("#bar").on("click.data_set",".foo",function(){...(中略)...});

イベントデリゲート時にoffメソッドを利用する際には以下の「要素」「イベント名」「名前空間」を合わせて指定することで影響範囲を最小限に抑えたままイベントを取り除くことができます。

$("#bar").off("click.data_set",".foo");

スポンサードリンク

«【大阪】jQueryで作るスマートフォンサイトUI図鑑セミナー | メイン | jQueryのtrigger()で名前空間を使う»