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

質問

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

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

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

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

回答No.3

byDesign · ベストアンサー

・リスナーについて
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);

お礼

回答＆詳細な解説ありがとうございました。

＞(removeEventListenerの第2引数に何をいれれば・・・ってなります)
・この一文読んで、ようやく意味が分かりました

＞関数の事をリスナーという別の言い方をしているだけでリスナーとは関数の事です
・説明分かりやすかったです

＞関数を変数に『(参照を)覚えておく』事で、登録解除ができる
＞bind関数の戻り値は関数なので、上記の通り変数に覚えておかないと解除できない
・ここの説明も大変分かりやすかったです
・単にそういう意味だったんですね
・ものすごく誤解していましたー

回答No.2

think49

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

# Re: re97さん

お礼

回答ありがとうございましたー

回答No.1

b0a0a

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

お礼

回答ありがとうございましたー