leesche blog

자바스크립트 클래스 안에서 이벤트리스너를 등록하고, 그 콜백 함수 안에서 this를 사용하려면 주의해야 한다. 아래는 board 엘리먼트의 자식 엘리먼트를 모두 선택해 각각에 이벤트리스너를 등록하는 메서드를 구현한 것이다. export default class BoardHandler{ #gameManager; /* ... */ #CLASS_NAME_BOARD_CHILD= ".board__child"; $allChildren = document.querySelectorAll(this.#CLASS_NAME_BOARD_CHILD); #initializeBoardElement() { this.$allChildren.forEach(($child) => ($child.textContent = "")); this.$..

아래 코드는 캘린더의 날짜를 출력함과 동시에 이벤트리스너를 붙이고 (다음 달로 넘어갈 때, 다시 이벤트리스너를) 제거하고, 새로운 날짜에 대한 이벤트리스너를 붙이는 기능을 구현한 것의 일부이다. export default class CalendarController { /* ... */ #dateOfCalendarClickEventListenerRepository = {}; /* ... 다른 메서드들 ... */ #printDates() { for (/* 캘린더 날짜 하나씩 순회하는 조건 */) { /* 캘린더 날짜 하나씩 텍스트를 채워넣는 반복문 */ const handleClickDateOfCalendar = createHandleClickDateOfCalendar( dateOfCalendar, $d..