Help us understand the problem. What is going on with this article?

[JavaScript] thisを含むイベントリスナーを登録/解除する

はじめに

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) }; で使用している thisbind で登録することで、参照することができます。

デモプログラム

bindを使用したイベントリスナーの登録・解除のデモプログラムを紹介します。

デモプログラム

このデモプログラムでは、1つ動画を再生する度に、再生開始前に動画再生のイベントリスナーを登録して、再生終了後にイベントリスナーを解除しています。イベントリスナーには、動画情報を this で参照しているため、イベントリスナーの登録後に、 bind を使用しています。

さいごに

ソースコードをGitHubに公開しています。

ソースファイルはこちら

以上です。

yun_bow
サービス志向エンジニアです。プログラミングを使ったモノづくりが好きです。AWS、Python、GO言語を勉強中。 こちらで投稿した記事は、所属会社の公式見解を示すものではないです。
pa-rk
Webアプリ、スマホアプリの開発を手掛ける技術者集団です。
https://www.pa-rk.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした