addEventListener와 bind

앞선 this를 소환하는 법과 이어지는 글이다.

bind로 this 바인딩을 시도를 해보다가 정리가 필요할 것 같아 글을 쓰게 되었다.

addEventListener에서 bind로 호출하기

$('.purchased-lotto-list-container').addEventListener(
      'click',
      this.handleToggleButtonClick.bind(this),
    );

위와 같이 .bind에 this를 넘겨 주면된다. 앞서 설명할 때에 bind의 경우 함수를 호출하지 않기 때문에 명시적으로 호출을 해야한다고 하였다
하지만 addEventListener에서 함수 내에서는 bind(this)()를 할 필요가 없다
이러한 이유는 addEventListener에서 두번째 인자로 예를 들어 this.handleToggleButtonClick() 이나 this.handdleToggleButtonClick(argument) 식으로 넣게 되면 js 파일을 읽어가는 과정에서 바로 실행이 되기 때문에 원하는 대로 click에 따른 이벤트 호출이 되지 않는다

bind로 호출한 함수 event 접근 가능한가?

나도 처음에는 bind를 사용하여도 event는 받을 수 있는건가? 상관없나? 헷깔렸었는데
지금의 나의 경험을 토대로 말하자면 Yes 이다!

모든 이벤트 객체는 이벤트 관련 프로퍼티를 상속받는다. 그리고 이 event 프로퍼티에 접근 하기 위해서

document.querySelector('.button').addEventListener('click', buttonClickEvent);

function buttonClickEvent(event){
	console.log(e.target, e.type) 

위의 코드 처럼 활용을 한다.
그리고 이는 이벤트 함수내에서 bind를 사용하였을때에도 마찬가지이다.

bind로 호출한 event를 제거할 수 있는가?

removeEventListener의 경우 addEventListener에서 전달된 인수와removeEventListener에서 전달 받은 인수가 같아야만 제거가 가능하다.

bind의 경우 bind를 사용하여 this를 바인딩하게 되면 해당 과정에서 새로운 함수를 반환하기 때문에 같은 함수를 removeEventListener의 인자로 넘긴다 하더라도 이름만 같을 뿐 둘은 다른 함수이다.

이 때문에 bind로 호출한 event를 제거하기 위해서는

this.eventExample = this.handleToggleButtonClick.bind(this); 

bind를 사용할 함수를 미리 할당하고

addToggleButtonClick() {
    $('.purchased-lotto-list-container').addEventListener(
      'click',
      this.eventExample,
    );
  } 

bind가 사용할 함수가 할당된 eventExample 를 addEventListenr에 인자로 넘겨준다.
그리곤, 이벤트를 지울 때에는
removeEventListener의 인자로 eventExample를 넘겨 주어야 한다.