[TIL] JS 이벤트를 줘야할 때 주의해야할 점(HTML Collection)

classname은 dom집합체(HTML collection)를 가져오기 떄문에 이벤트리스너가 불가하다. 그래서 특정해줘야한다.

const canvas = document.getElementsByClassName("jsCanvas");

function onMouseMove(event) {
  console.log(event);
}
if (canvas) {
  console.log(canvas);
  canvas.addEventListener("mousemove", onMouseMove);
}

• 개발자도구에서 확인했을 때

여기서 왜 자꾸 이벤트리스너에 에러가 뜨는지 구글링해본 결과.

HTML collection으로 가져올 땐 이벤트가 필요한 elements에 배열의 인덱스로 접근할 수 있고, .속성명의 방식으로도 접근할 수 있다.

그래서 className으로 가져온다면?

const canvas = document.getElementsByClassName("jsCanvas");

function onMouseMove(event) {
  console.log(event);
}

if (canvas) {
  canvas[0].addEventListener("mousemove", onMouseMove);
}

라고 접근해주어야한다. 아니면 id를 가져오는 방법도 있다.

id는 가져오는 테그 자체에 접근하여 console.log(canvas)로 확인해보면 아래 사진처럼 접근하고있다.