querySelectorAll getElementsByClassName 등 복수 선택 메소드와 addEventListener [자바스크립트]

틱택토 만들기 시작.

 

섹션을 셀 9개로 나누고 게임시작 버튼 생성.

 

게임시작 버튼에 이벤트리스너 붙임.

document.querySelector('.start').addEventListener('click', function() {
  // blah blah
});

 

그리고 각 셀에도 이벤트리스너를 붙이려 시도.

document.querySelectorAll('.cell').addEventListener('click', function() {
  // blah blah
});

 

특정 셀들도 지정해놔야 할 것 같아서 셀 하나하나에 클래스 따로 부여하고 이벤트리스너 붙여봄.

document.getElementsByClassName('_11 _12 _13 _21 _22 _23 _31 _32 _33').addEventListener('click', function() {
  // blah blah
});

 

그런데 오류 발생!

Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function

뒤쪽이 소괄호로 묶여 있어서 앞쪽을 함수로 인식했나 보다.

 

VSC로 돌아와서 살펴보니 querySelector에 붙인 addEventListener와 querySelectorAll, getElementsByClassName에 붙인 addEventListener의 색깔이 다름.

 

이리저리 바꿔본 결과 querySelector getElementById VS querySelectorAll getElementsByClassName으로 나뉘는 걸로 보아 여러 요소를 선택하는 메소드 뒤에는 addEventListener를 붙일 수 없다고 추측. 원인과 해결 방법 검색 시작.

 

querySelector와 getElementById는 단일 DOM 객체를 불러오지만 복수 선택 메소드들은 NodeList를 가져오기 때문이라고 함.

 

해결방법은 NodeList의 요소 하나하나에 for문으로 접근해 이벤트리스너를 붙이기.

var cells = document.getElementsByClassName('cell');

for (var i = 0; i < cells.length; i++) {
  var eachCell = cells[i];
  
  eachCell.addEventListener('click', function() {
    // blah blah
  });
};

 

그리고 원래는 안 됐는데 이제는 forEach도 사용할 수 있다고 한다. 

document.querySelectorAll('.cell').forEach((cell) => {
  cell.addEventListener('click', function() {
    // blah blah
  });
});

(forEach와 위 함수 사용방식 공부 필요.)

 

alert 넣어서 실험해보니 둘 다 정상적으로 실행!

 

_11 _12처럼 특정 셀을 지정하는 게 필요한지는 게임을 만들면서 확인해야 함. 필요하다면 어떻게 구현해야 하는지도 찾아봐야. 

var cells = document.getElementsByClassName('_11 _12 _13 _21 _22 _23 _31 _32 _33');

for (var i = 0; i < cells.length; i++) {
  var eachCell = cells[i];
  
  eachCell.addEventListener('click', function() {
    // blah blah
  });
};

우선 이렇게 썼을 땐 작동하지 않음.