はじめに
JavaScriptにおいて、this を含むイベントリスナーを解除するには、 bind を使用します。
イベントリスナーの登録
JavaScriptの addEventListener は、イベントに合わせて呼び出される処理（イベントリスナー）を登録する関数です。例えば、WEBページが表示されたときに1回だけ登録して、クリックイベントの呼び出し処理を行うような場合に使用します。
let btn = document.getElementById('btn');
btn.addEventListener('click', () => { /* クリックしたときの処理 */ });
イベントリスナーの解除
() => { /* クリックしたときの処理 */ } は、関数名が定義されていない関数（無名関数）です。この無名関数は、イベントリスナーを1回だけ登録する場合は有効です。
しかし、イベントリスナーを登録して解除する場合は、無名関数では解除することができません。
btn.removeEventListener('click', () => { /* クリックしたときの処理 */ });
removeEventListener はイベントリスナーを解除する関数です。上記のように無名関数で実装した場合、登録と解除の関数は同じ関数ではないため、登録した関数に対して解除されません。クリックイベントが発火されてしまいます。
イベントリスナーを解除するためには、無名関数ではなく関数名を定義して実装します。
let onClick = () => { /* クリックしたときの処理 */ };
btn.addEventListener('click', onClick);
btn.removeEventListener('click', onClick);
thisを含むイベントリスナーの登録
let onClick = () => { console.log(this.video) }; のようなに関数内に this が含まれる場合はどうでしょうか。
console.log(this.video); // 参照できる
let onClick = () => { console.log(this.video) }; // 参照できない (=undefined)
btn.addEventListener('click', onClick);
btn.removeEventListener('click', onClick);
this を参照することができません。
ここで bind の登場です。
console.log(this.video); // 参照できる
let onClick = () => { console.log(this.video) }; // 参照できる
let onClickBind = onClick.bind(this);
btn.addEventListener('click', onClickBind);
btn.removeEventListener('click', onClickBind);
let onClick = () => { console.log(this.video) }; で使用している this を bind で登録することで、参照することができます。
デモプログラム
bindを使用したイベントリスナーの登録・解除のデモプログラムを紹介します。
このデモプログラムでは、1つ動画を再生する度に、再生開始前に動画再生のイベントリスナーを登録して、再生終了後にイベントリスナーを解除しています。イベントリスナーには、動画情報を this で参照しているため、イベントリスナーの登録後に、 bind を使用しています。
さいごに
ソースコードをGitHubに公開しています。
以上です。