화려하고 다양한 기능이 들어간 웹 사이트가 늘어나면서 프론트앤드 개발자가 처리해야할 interaction이 더 많아졌다.
interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요하다.
특정 요소를 interactive하게 하는 것을 이벤트라고 한다.
- 클릭 이벤트
- 마우스 이벤트
- 스크롤 이벤트
- 터치 이벤트
- resize(화면 크기 변화) 이벤트
등등
JavaScript에서 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그래밍을 작성해야 한다.
addEventListener
addEventListener은 이벤트를 달 때 사용하는 함수이다. addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행 시켜준다.
요소.addEventListener(event 종류, function() {
//이벤트가 일어났을 때 실행할 내용
});
특정 요소에 addEventListener 함수를 붙이고, 인자로 event 종류와 event가 발생했을 때 실행 할 함수를 전달한다.
이렇게 인자로 전달된 함수를 콜백 함수라고 부른다.
event 종류
click event
버튼, 사진, 글 등 웹사이트에서 이루어지는 event 중 가장 많은 것이 click event이다.
프론트앤드 개발자는 버튼, 사진, 글 등의 요소마다 click event를 달아서 각자 click event에 맞는 reaction을 프로그래밍합니다.
- 로그인 버튼 클릭 → 로그인 api 호출
- 상품 사진 클릭 → 상품 상세 화면으로 이동
- 자세히 보기 버튼 클릭 → 팝업화면 출력
event 함수를 추가할땐 DOM을 사용한다.
const thisIsButton = document.getElementsByClassName('login-btn')[0];
key event
key event는 사람이 키보드를 누르면 발생하는 이벤트이다.
- 키보드를 눌렀을 때 발생하는 keydown
- 키보드를 누르고 떼는 순간 발생하는 keyup
- 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress
