問題はbind の付いたリスナーを削除できないこと

Question

リンク先で下記のように書かれていますが、どういう意味でしょうか？
＞問題は、bind の付いたリスナーを削除できないということ

・「bind の付いたリスナーを削除」しないと何がマズいのでしょうか？
・thisの挙動が変わったままになるから？
・thisの挙動が変わるというのは、Somethingの中だけの話ではないのでしょうか？
・この場合のリスナーは？　addEventListener('click', this.onclick2を指すのでしょうか？

＞リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります
・「リスナーへの参照を残しておく」って、具体的にどういうことなのでしょうか？

https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener

byDesign · Accepted Answer

・リスナーについて
http://e-words.jp/w/E383AAE382B9E3838AE383BC.html

var listener = function(){ /*ボタンが押された時の処理*/};
var button = document.getElementById("buttonのID");
button.addEventListener("click", listener , false);

ボタンクリック時のイベントを登録した所です、
addEventListenerの2番目の引数が、clickしたときに呼ばれる関数です。
この関数の事をリスナーという別の言い方をしているだけで
リスナーとは関数の事です。

---------------------------------------
・「bind の付いたリスナーを削除」しないと何がマズいのでしょうか？
イベントを解除するにはremoveEventListenerを使います
https://developer.mozilla.org/ja/docs/Web/API/EventTarget.removeEventListener

removeEventListenerの第2引数は、addEventListenerに登録した関数（リスナー）を指定します。
removeEventListener("click", /*addEventLisnerに登録した関数*/, false);

----------
var button = document.getElementById("buttonのID");
button.addEventListener("click", function(){/*ボタンが押された時の処理*/ } , false);
このように登録した場合、解除したいけどできません。
(removeEventListenerの第2引数に何をいれれば・・・ってなります)

var listener = function(){ /*ボタンが押された時の処理*/};
var button = document.getElementById("buttonのID");
button.addEventListener("click", listener , false);

このように関数を変数に『(参照を)覚えておく』事で、登録解除ができるのです。

button.removeEventListener("click", listener , false);
--------------------------------------------------------------------
・「リスナーへの参照を残しておく」って、具体的にどういうことなのでしょうか？
bind関数の戻り値は関数なので、上記の通り変数に覚えておかないと解除できないということです。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener 
この説明で以下のような処理があります。

element.addEventListener('click', this.onclick1, false);
element.addEventListener('click', this.onclick2.bind(this), false);

さて、イベント解除することを考えてみましょう
上はthis.onclick1関数を指定したので、以下のように解除できます。
element.removeEventListener('click', this.onclick1, false);
(onclick1メンバー変数に関数を覚えている)

下はthis.onclick2.bind(this)で『戻ってきた関数』を登録していますが覚えていません
その為、どこかの変数に覚えておかないと解除できません。

var listener = this.onclick2.bind(this);
element.addEventListener('click', listener , false);

------------------------------------------
余談ですが、ローカル変数は関数から抜けるとなくなるので、実際はメンバー変数なりに覚える事になります。
this.xxxx = this.onclick2.bind(this);

think49 · Answer

実際に使ってみれば意味が分かるはずです。
出来るだけ自分でコードを書いて試行錯誤してみてください。
関数オブジェクトは参照であり、addEventListener, removeEventListener では同じlisnerオブジェクトを参照する必要があります。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget.removeEventListener

# Re: re97さん

b0a0a · Answer

bindされたリスナーが削除できない＝問題なのではありません。
何らかの理由で削除したくなっても元の関数を使ってremoveできないということです。
そういう時はbindした関数を変数に入れておくのです。

問題はbind の付いたリスナーを削除できないこと

・リスナーについて

実際に使ってみれば意味が分かるはずです。

bindされたリスナーが削除できない＝問題なのではありません。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング