기사 을 썼는데도 removeEventListener에서 다시 망설였다.

이번에는 객체 지향 프로그래밍 버전.

실패 예

class X {
  click(e) {
    // thisがオブジェクトXを指すようにしたい
    console.log('click', this, e.currentTarget);
  }
  add() {
    document.addEventListener('click', (e) => this.click(e));
  }
  remove() {
    document.removeEventListener('click', (e) => this.click(e));
  }
}
var x = new X();
x.add();
x.remove();

(()=>{}) === (()=>{}) 또는 (function(){}) === (function(){})가 false를 반환하기 때문에 removeEventListener에 익명 함수를 사용할 수 없습니다.

addEventListener로 지정한 함수와 같은 함수를 removeEventListener로 지정할 수 없기 때문에 이벤트 청취자를 삭제할 수 없다.

이벤트 리스너 함수에 this.click를 지정하면 removeEventListener로 삭제할 수 있지만 this가 document를 가리키고 e.currentTarget도 document를 가리키므로 중복됩니다.

객체 지향 프로그래밍에서 이벤트 리스너 함수를 쓸 수 없다?

여기에서 한 시간 동안 고민했다.

성공 예 1 (bind)

class X {
  constructor() {
    this.event_listeners = {};
  }
  click(e) {
    // thisがオブジェクトXを指すようにしたい
    console.log('click', this, e.currentTarget);
  }
  add() {
    this.event_listeners.click = this.click.bind(this);
    document.addEventListener('click', this.event_listeners.click);
  }
  remove() {
    document.removeEventListener('click', this.event_listeners.click);
  }
}
var x = new X();
x.add();
x.remove();

함수에 this를 bind 1 하고, 그 함수를 저장해 쓰면 좋다고 생각한다.

성공 예 2 (handleEvent)

모든 이벤트를 포착하는 handleEvent() 라는 특별한 함수가 존재했다. 2

handleEvent를 사용하면 어떻게 될까.

class X {
  click(e) {
    // thisがオブジェクトXを指すようにしたい
    console.log('click', this, e.currentTarget);
  }
  add() {
    document.addEventListener('click', this);
  }
  remove() {
    document.removeEventListener('click', this);
  }
  handleEvent(e) {
    if (e.type === 'click' && e.currentTarget === document) {
      this.click(e);
    }
  }
}
var x = new X();
x.add();
x.remove();

이 방법으로 이벤트 리스너를 삭제할 수 있습니다

객체 x 의 모든 이벤트가 하나의 함수 handleEvent 에 집약되므로 객체의 이벤트가 많아질 때 디버그하기 쉬워질지도 모른다.


this.event_listeners.click = (e) => this.click(e) 라고 써도 좋다. addEventListener 가 this 를 바꾸기 때문에 this.event_listeners.click = function (e) { this.click(e) } 라고는 쓸 수 없다. ↩

EventTarget.addEventListener() - Web API | MDN  ↩