[javascript] 같은 class 요소에 addEventListener 실행하고 싶을 때

 

 기본적으로 메인페이지의 중앙에 검색창이 있는 영화검색사이트. 

다른 페이지에서도 검색창에 접근할 수 있도록 하기 위해서 헤더 안에 검색창을 넣었다. 

즉, search navigation을 헤더 우측으로 배치하고 js를 통해 메인페이지를 제외한 다른 페이지에서만 나타나도록 코드를 짰다. 

 

 메인페이지의 기존 search box 코드를 복붙해서 사용하되 클래스명을 다르게(searchNav) 지정했고,
같은 기능이 들어가는 input의 클래스는 그대로 뒀기 때문에 초기에는 문제가 없었다. 

<div class="searchBox">                    
  <input type="text" class="searchInput" placeholder="search movie" title="찾고 싶은 영화를 입력해주세요">
  <button type="button" class="sendBtn"><i class="fas fa-search"></i></button>
</div>

>> 기존에 있던 메인페이지의 searchBox 

 

<nav class="searchNav">
  <input type="text" class="searchInput" placeholder="search movie" title="찾고 싶은 영화를 입력해주세요">
  <button type="button" class="sendBtn"><i class="fas fa-search"></i></button>
</nav>

>>header에 추가한 searchNav

이렇게 input과 button을 감싸는 div와 nav의 클래스만 변경했을 뿐, 하위 요소들은 그대로 뒀다. 

(나중에 해결하고 보니 이 때 생각이 짧았구나...싶었다;)

---

 그러나 메인페이지 search box의 ui를 손보기 위해 js에서 함수를 추가하면서부터! 오류가 뜨고 코드가 꼬이기 시작했다.

그도 그럴 것이, searchBox라는 클래스를 가진 요소는 index.php에만 존재했기 때문이다.

const searchBox = document.querySelector(".searchBox")

그래서 searchNav에 searchBox 클래스를 추가했다.

<nav class="searchNav searchBox">
  <input type="text" class="searchInput" placeholder="search movie" title="찾고 싶은 영화를 입력해주세요">
  <button type="button" class="sendBtn"><i class="fas fa-search"></i></button>
</nav>

---

이제 남은 과제는
같은 기능이 구현되어야 하는 요소의 클래스가 같을 때. 각 기능을 함수로 어떻게 적어야 하는지?? 였다.

( = 이 포스팅을 하는 이유 )

 

한참 구글링을 하다가 관련된 링크를 발견했고

https://pythonq.com/so/javascript/1586973

javascript - 같은 클래스의 여러 요소에 "addEventListener"를 추가하고 싶습니다 - IT 툴 넷

아..... forEach가 있었지..........! :-(
위 링크의 답변을 참고해서 querySelectorAll과 forEach를 활용해 아래와 같이 해결했다..!

searchBox.forEach(function(event){
        event.addEventListener("focusin", focusIn);
        event.addEventListener("focusout", focusOut);
    });

 

머리로 알고 있다고 해도 적재적소에 활용하지 못하면 무용지물이라는 것을 다시 한 번 느꼈다.
이 방법이 최선의 방법이 아닐 수도 있고, 결과적으로는 별 것 아닌 문제였지만 혼자 구글링하고 documentation을 뒤적거리고 머리 굴리는 과정이 꼭. 필요하구나 싶었던 시간이었다.

---

 

querySelectorAll과 forEach관련 documentation 참고!

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll

Document.querySelectorAll() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN