최종 팀 프로젝트[front] addEventListener 활용하기

1. 키보드 입력을 기준으로 함수 실행

 문제점

검색창 기능을 만들면서 Enter를 입력했을 때 함수가 작동하도록 만들고 싶다. 

 시도해 본 것들

addEventListener에서 keydown옵션 활용하기

키보드 입력시 이벤트가 발생하는 것은 좋지만, Enter가 아닌 다른 입력도 모두 함수를 실행하면서 검색함수를 실행시키기에 적합하지 않음.

 

Enter만 함수를 실행시킬 방법 찾기 

keyCode확인 

검색 결과 과거에 사용하다 이제 잘 사용하지 않는 코드

 

code 확인

 code가 Enter인 경우 함수 실행으로 해결하기 

 

code에 대한 docs 

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

 해결 방법

document.getElementById("search").addEventListener("keydown", function (e) {
    if (e.code === 'Enter') {
        exhibitionSearch(this)
    }
})

 알게 된 점

js처럼 오래된 언어는 같은 결과를 만드는 함수도 하나가 아니여서 단순히 쓸 수 있다고 바로 넘어가기 보다는 조금 더 찾아보는 습관을 기르는 것이 좋을 것 같다.