JavaScript /querySelectorAll와 addEventListener 함께 사용하기

querySelectorAll와 addEventListener 함께 사용하기

 

querySelectorAll은 배열로 요소를 출력하기 때문에 addEventListener와 함께 쓰면 오류가 발생합니다.

(querySelector는 오류가 발생하지 않고 querySelectorAll만 발생합니다.)

이때는 반복문을 이용해서 각 배열안의 요소를 지정해주면 됩니다.

 

아래는 반복문을 이용한 예시입니다.

(예시 코드는 네비게이션 드롭메뉴 효과를 만들기 위해 작성한 코드를 가져왔습니다.)

const Menu = document.querySelectorAll(".mian");
const subMenu = document.querySelectorAll(".sub");

for (let i = 0; i < Menu.length; i++) {

  Menu[i].addEventListener("mouseenter", act);
  Menu[i].addEventListener("mouseleave", remove);

  function act(event) {
    subMenu[i].classList.replace("s_menu_remove", "s_menu_active");
  }

  function remove(event) {
    subMenu[i].classList.replace("s_menu_active", "s_menu_remove");
  }
}

 

1. querySelectorAll을 사용해 html에서 요소들을 불러옵니다.

이렇게 불러온 요소들은 배열로 출력되기 때문에 addEventListener가 인식하지 못합니다.

const Menu = document.querySelectorAll(".mian");
const subMenu = document.querySelectorAll(".sub");

 

2. 반복문을 사용해 배열 안의 각 요소에 접근할 수 있도록 합니다.

이때 이벤트를 적용할 대상(배열)의 length 만큼 반복하도록 합니다.

for (let i = 0; i < Menu.length; i++) {}

 

3. 반복문 안에 배열과 함께 addEventListener를 작성합니다.

작성 방식 : 배열[i].addEventListener("이벤트","이벤트가 발생할 경우 동작할 function") 

그리고 "이벤트가 발생할 경우 동작할 function"을 작성해줍니다.

 Menu[i].addEventListener("mouseenter", act);

  function act(event) {
    subMenu[i].classList.replace("s_menu_remove", "s_menu_active");
  }

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!