JavaScriptのメソッドと関数って何か違うん？
と思っていたがちゃんと違ったので備忘録
ハマったこと
class形式である処理を書いていた時に、addEventListenerでメソッドを実行。
removeEventListenerでメソッドを削除しよーと思ったら削除できなかった。
詳細
addEventListenerは無名関数は削除できないというのは知っていたので
メソッドにスクロールで行いたい処理をまとめて、イベント付与！
removeEventListenerでもメソッド削除できると思っていたらできなかった
HTML
<button id="btn1">アラート出す</button>
<button id="btn2">イベント削除</button>
class Btn {
constructor(){
this.alertBtn = document.getElementById('btn1')
this.removeBtn = document.getElementById('btn2')
this.addClickEvent()
}
addClickEvent() {
// ＃btn1を押すとアラートが出る処理を付与
this.alertBtn.addEventListener('click', this.openAlert)
// ＃btn２を押すと＃btn1のアラートが出る処理を削除する処理を付与
this.removeBtn.addEventListener('click', this.removeEvent)
}
openAlert() {
alert('click')
}
removeEvent() {
＃btn1のアラートが出る処理を削除
this.alertBtn.removeEventListener('click', this.openAlert)
}
}
- ＃btn1を押す
- アラートでる
- ＃btn2を押す
- ＃btn1を押す
４では再度アラートは出ないはずだったが実際は出てる
解決
メソッドはremoveEventListenerできないのでbindを使用してメソッドを実行する関数を作成。
その関数をaddEventListenerしたりremoveEventListenerしたりする
class Btn {
constructor(){
this.alertBtn = document.getElementById('btn1')
this.removeBtn = document.getElementById('btn2')
this.addClickEvent()
}
addClickEvent() {
// removeEventメソッドでも使用できるようにしておく
this.alertBtnEvent = this.openAlert.bind(this)
this.removeBtnEvent = this.removeEvent.bind(this)
this.alertBtn.addEventListener('click', this.alertBtnEvent)
this.removeBtn.addEventListener('click', this.removeBtnEvent)
}
openAlert() {
alert('click')
}
removeEvent() {
this.alertBtn.removeEventListener('click', this.alertBtnEvent)
}
}
JavaScript難シイね
まんまそのまんまの質問（英語版）
Javascript removeEventListener not working inside a class
bindってそもそも何？ってところからっだので以下を参考にさせていただきました。
ありがとうございます。