클래스 내에서의 이벤트 리스너 처리

예시 코드

 모듈화를 위해 다음과 같이 button 태그의 클래스 어트리뷰트인 btn의 노드 생성과 이벤트 리스너 등록을 Button 클래스 내의 생성자에

 선언하여 주었다. btn 요소에 직접적으로 addEventListener을 등록하지 않았음에도 콘솔엔 Hello가 출력된다.

 

 위의 동작 방식을 이해하기 위해서는 크게 가지가 필요하다.

 1. this 바인딩 

 this는 자기 참조 변수로서, 자신이 속한 객체 또는 생성할 인스턴스를 가리킨다. 여기서 생성할 인스턴스는 btn을 가리키며 함수 평가 과정이 끝나고 실제 코드가 실행될 때 바인딩된다.

 

 2. constructor 생성자 함수

 constructor 생성자 함수는 함수 내의 코드식들을 초기화 해주고 암묵적으로 this, 즉 인스턴스를 반환한다. 

 

 3. 가비지 컬렉션

 반환 된 인스턴스는 객체 btn에 의해 참조된다. 즉, 전역변수 btn이라는 식별자가 생성 된 인스턴스를 계속 참조하고 있기 때문에 가비지 콜 렉터에 의해 자동으로 해제되지 않는다. 해제되지 않고 메모리 상에 데이터가 존재하기 때문에 실제 버튼을 클릭하였을 때도 이벤트 리스너 에 등록한 콜백 함수가 호출 될 수 있다.

 >(수정 2021.03.11) 

 인스턴스 객체 btn에 의해 참조되고 있어서 이벤트 리스너가 유용한 것이 아니라 이벤트 리스너가 호출되는 순간, Web APIs에 등록하게  되고 이후 클릭 이벤트가 발생할 때마다 이벤트 리스너에 등록한 콜백함수가 테스크 큐에 적재되고 이벤트 루프에 의해 콜 스택에서 실행되는 동작이다.