はじめに

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に公開しています。

ソースファイルはこちら

以上です。