こんにちは、ライターのマサトです！
今回は、登録されているイベント処理をjQueryから削除することができる「off()」メソッドについて学習をしていきましょう！
この記事では、
・「off()」とは？
・「off()」の使い方
という基本的な内容から、
・複数イベントの削除について
・「off()」の範囲指定
などの応用的な使い方に関しても解説していきます。
この記事で、「off()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「off()」とは？
それでは、まず最初に「off()」について基本的な知識から学習を進めていきましょう！
「off()」は、特定のHTML要素に登録されているイベント処理を削除できるメソッドになります。
この「登録されているイベント処理」について、もう少し詳しく見ていきましょう。
例えば、次のような状態を想定してみてください！
$('button').click(function() {
console.log('ボタンがクリックされました！');
})
$('a').on('click', function() {
console.log('リンクがクリックされました！');
})
この例では、「ボタン要素」と「リンク要素」にそれぞれクリックイベント処理が記述されている状態ですね。
クリックするとコンソールに指定した文字列が出力されるようになります。
このような時に、クリックイベント処理が不要になったので動的に削除したいケースで「off()」は役に立つわけです。
本記事では、「off()」の基本的な使い方から活用方法までまとめて学習していきますので、ぜひ参考にしてみてください！
「off()」の使い方
この章では、「off()」の基本的な使い方について見ていきましょう！
一般的な構文や実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、最も基本となる構文から見ていきましょう！
「off()」は、イベントが登録されている要素を対象にして実行するのが基本となります。
次の構文例を見てください！
対象要素.off( イベント名, セレクタ )
対象となる要素に「off()」を実行しているのが分かります。
引数は省略可能ですが、イベント名を指定することで特定のイベントだけを削除するようなことも可能です。
また、セレクタを設定することで削除対象の範囲を限定するような使い方もできるわけです。
特定のイベント（click）を削除する方法
それでは、実際に「off()」を使ったプログラミング手法について見ていきましょう！
まず最初に次のようなHTMLがあると想定してください。
<a href="#">リンク</a> <button>解除</button>
これは、単純な「リンク要素」「ボタン要素」がそれぞれ配置されているだけの状態です。
この状態で、「リンク要素」をクリックするとコンソールへ文字列を出力するには次のように記述します。
$('a').on('click', function() {
console.log('リンクがクリックされました！');
})
「on()」メソッドを使ってクリックイベントを登録しているのが分かりますね。
今度は、「ボタン要素」をクリックしたら「リンク要素」のイベントを削除するようにしてみましょう！
$('button').on('click', function() {
$('a').off();
})
この例では、クリックイベント処理の中でリンク要素に対してoff()を実行しているのが分かります。
これにより、ボタン要素をクリックした瞬間にリンク要素のイベントは削除されるわけです。
その証拠にリンク要素をクリックしてもコンソールには何も出力されないことが確認できます。
複数イベントの削除について
この章では、削除するイベントが複数ある場合の対処について学習していきましょう！
主に、すべてのイベントを削除する方法と特定のイベントを指定して削除する方法について学んでいきます。
すべてのイベントを削除する方法
まずは、特定のHTML要素に登録されているすべてのイベント処理を削除する方法から見ていきましょう！
と、言っても実はこれまで学んだ方法でもう実現することができます。
次のイベント処理の記述を見て下さい！
$('a').on('click', function() {
console.log('リンクがクリックされました！');
})
$('a').on('mouseover', function() {
console.log('リンクにマウスが重なりました！');
})
$('a').on('mouseout', function() {
console.log('マウスが離れました！');
})
この例では、「aタグ（リンク要素）」に3種類のイベントが登録されているのが分かります。
「on()」を使ったイベント処理は「追加型」なので、イベントがどんどん増えていくのが一般的です。
この時に、「aタグ」に含まれているすべてのイベント処理を削除するには次のように記述します。
$('button').on('click', function() {
$('a').off();
})
クリックイベント処理内の「off()」の記述に注目してください！
実はこれまで学んできたoff()とまったく同じ記述なのです。
つまり、引数なしでoff()を実行すると、対象要素に含まれているすべてのイベント処理を削除するという意味だったのです。
複数のイベント名を指定して削除する方法
今度は、すべてを削除するのではなく特定のイベント処理だけを削除する方法について見ていきましょう！
方法は簡単で、「off()」の引数に削除したいイベント名を指定するだけでOKです。
次のサンプル例を見て下さい！
$('button').on('click', function() {
$('a').off('click mouseover');
})
「off()」の引数に注目してください！
「click」と「mouseover」の2種類のイベント名を指定することで、両方のイベントを削除しているわけです。
イベント名は「スペース」で空白を開けて複数指定するという点に注意しましょう。
こにれより、対象要素に複数のイベントが登録されていても、特定のイベントだけをピックアップして削除することが可能になります。
「off()」の名前空間
この章では、イベント処理の名前空間について詳しく見ていきましょう！
名前空間の設定方法やoff()への活用方法について学んでいきます。
イベントに名前空間を設定する方法
まずは、「名前空間」の基本と設定方法について見ていきましょう！
イベント処理にはオプションとして「名前空間」を設定できるわけですが、これによりイベントを区別することが簡単にできます。
例えば、次のようなイベント処理を見て下さい！
$('a').on('click', function() {
console.log('1つ目のイベントが実行されました！');
})
$('a').on('click', function() {
console.log('2つ目のイベントが実行されました！');
})
実行結果
1つ目のイベントが実行されました！ 2つ目のイベントが実行されました！
この例では、まったく同じ「a要素」に2つのクリックイベントが登録されていますよね？
処理の中身は違いますが、同じクリックイベントなので「off()」を使うと両方とも削除されてしまいます。
このような時に「名前空間」を使ってイベントを区別するわけです。
次のサンプル例を見て下さい！
$('a').on('click.one', function() {
console.log('1つ目のイベントが実行されました！');
})
イベント名に注目してください！
「click.one」と記述されているのが分かりますね？
実は、「イベント名.名前」のようにイベント名に「.（ドット）」で繋げて好きな名称を指定することができます。
つまり、「click」と「click.one」は同じクリックイベントですが、区別して指定することができることを意味しているのです。
名前空間を使ってイベントの削除範囲を決める
さて、名前空間の設定方法が分かったところで、今度は「off()」で利用するための手法について見ていきましょう！
そこで、もう一度「名前空間」を利用したイベント処理を見てみます。
$('a').on('click.one', function() {
console.log('1つ目のイベントが実行されました！');
})
$('a').on('click', function() {
console.log('2つ目のイベントが実行されました！');
})
「a要素」にクリックイベントが2つ登録されていますが、1つ目は名前空間を使って区別できるようになっています。
この状態の時に、「off()」を使って1つ目のイベント処理だけを削除してみましょう！
$('button').on('click', function() {
$('a').off('click.one');
})
off()の引数に注目してください！
「click.one」と指定することで、1つ目のクリックイベントだけを削除しているのが分かります。
もし、名前空間を使わずに引数を「click」と指定したら、2つのイベント処理が同時に削除されてしまうわけです。
まとめ
今回は、対象要素に登録されているイベント処理を削除できる「off()」メソッドについて学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・off()は引数なしだとすべてのイベントを削除する
・off()の引数にスペースを開けることで複数のイベントを指定できる
・名前空間を利用すれば特定のイベントを区別して削除できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
