event

특정요소에 동적인 반응을 할 수 있게 하는 것을 event라고 한다.
※이벤트의 종류
1. 클릭 이벤트
2. 마우스 이벤트
3. 스크롤 이벤트
4. 터치 이벤트
5. resize(화면 크기 변화) 이벤트 등등 다양하다.

addEventListener

이벤트를 달 때 사용하는 함수 이름은 addEventListener이다.
모양은 아래와 같다.

요소.addEventListener(이벤트 종류,function() {
//이벤트가 일어났을 때 실행할 내용
};

특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달한다.
이제까지는 인자로 배열, String, Number, Date 객체를 전달하는 것을 봤는데 함수로도 인자 전달이 가능하다.
이렇게 인자로 전달된 함수를 콜백함수라고 한다. 일단 콜백함수는 단어만 알고 넘어가자.

클릭이벤트

버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트 입니다.
프론트엔드 개발자는 버튼, 사진, 글 등의 요소마다 클릭 이벤트를 달아서 각각의 클릭이벤트에 맞는 reaction을 만든다.

† 로그인 버튼 클릭 -> 로그인 api 호출
† 상품 사진 클릭 -> 상품 상세 화면으로 이동
† 자세히 보기 버튼 클릭 -> 팝업화면 출력

간단한 예제로 보겠습니다.
event 함수를 추가하고 싶으면, 앞에서 배웠던 DOM을 사용합니다.
그래서 DOM에 어떻게 접근하고, 어떻게 수정하는지 잘 알고 있어야 합니다.

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;
  
  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('로그인 성공!!');
});

한줄씩 살펴보면 
const thisIsButton = document.getElementsByClassName('login-btn')[0];
getElementsByClassName함수로 login-btn라는 클래스 이름이 있는 요소를 찾습니다.

뒤에 [0]은 왜 붙었을까요?
class 이름은 여러 요소에 중복해서 이름을 줄 수 있습니다.
그래서 getElementsByClassName 으로 요소를 찾으면 여러 요소가 담긴 배열이 반환됩니다.
해당 클래스 이름을 가진 요소가 하나 밖에 없으면, 요소가 하나인(배열 길이가 한 개인) 배열이 반환됩니다.

위에서 button이라는 변수에 .login-btn 요소를 찾아서 저장하였죠.
그 요소에 addEventListener를 달아줍니다.
첫 번째 인자에 'click'이라고 세팅했습니다.

thisIsButton.addEventListener('click', function() {
  //click 했을 때 실행되어야할 기능
});
앞으로 button.login-btn을 클릭(click 이벤트가 발생) 하면,
두 번째 인자로 넘긴 함수가 실행됩니다.```