검색 영역 코드 개선

[BEFORE]

input addEventListener keyup에서 검색할 키워드를 담고, event.keycode === 13으로 엔터키 감지하여 검색기능 활성화

button addEventListenerclick에서 input 공백 검증 및 검색 기능 활성화

const $movieList = document.querySelector("#movieList");
const $keyword = document.querySelector("#keyword");
const $searchBtn = document.querySelector("#searchBtn");
let searchKeyword = "";

$keyword.focus();

//검색 - keyup
$keyword.addEventListener("keyup", (event) => {
  //입력 할 때 마다 변수에 담기
  searchKeyword = event.currentTarget.value;
  //enter 키 눌렀을 때
   if (event.keyCode === 13) {
     if (!searchKeyword.trim()) {
       alert("검색어를 입력해주세요.");
       $keyword.focus();
       return;
     }
     showHideMovie(searchKeyword);
   }
});

//검색 - click
 $searchBtn.addEventListener("click", () => {
   if (!searchKeyword.trim()) {
     alert("검색어를 입력해주세요.");
     $keyword.focus();
     return;
   }
   showHideMovie(searchKeyword);
 });

 

[AFTER]

 

form, button type="submit"으로 코드를 개선해 보니 js의 코드가 확실히 줄었다.

submit으로 처리하면 버튼에 click 이벤트를 줄 필요가 없고, keyup에서 엔터키를 눌렀는지 감지할 필요가 없다.

 

const $movieList = document.querySelector("#movieList");
const $searchForm = document.querySelector("#searchForm");
const $keyword = document.querySelector("#keyword");
let searchKeyword = "";

$keyword.focus();

//검색 - keyup
$keyword.addEventListener("keyup", (event) => {
  //입력 할 때 마다 변수에 담기
  searchKeyword = event.currentTarget.value;  
});

$searchForm.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!searchKeyword.trim()) {
    alert("검색어를 입력해주세요.");
    $keyword.focus();
    return;
  }
  showHideMovie(searchKeyword);
});