jQueryでのイベントの削除方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのイベントの削除方法について、簡単に解説していきます。

全てのイベントの削除

jQueryのoffメソッドでイベントを削除できます。

引数を指定しない場合は全てのイベントを削除します。

$('#hoge').off();

上記のコードでは、hogeのidの要素の全てのイベントを削除します。

特定のイベントの削除

offメソッドでは特定のイベントの削除も可能です。

以下のように引数に削除するイベントを指定します。

$('#hoge').off('click');

以下のようにスペースで区切ることで引数に複数のイベントも指定できます。

$('#hoge').off('click blur');

同じイベントを分ける

同じイベントでも削除したくない処理もあるかと思います。

その場合には以下のようにイベント名.任意の名前の名前空間を使えます。

$('#hoge').on('click.first', function() {
  // 処理を書く
});
$('#hoge').on('click.second', function() {
  // 処理を書く 
});

このようにイベントを登録しておくことで、以下のように同じイベントであっても一部のみを削除できます。

$('#hoge').off('click.first');