좋은 웹페이지를 제작하기위해는 interactive한 반응을 할 수있어야한다. 그리고 특정 요소에 이러한 반응을 하게 하는것을 Event라고 한다. 따라서, JavaScript에서 터치, 클릭, 마우스, 키보드, 화면 변화 등의 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그래밍을 작성해야된다.

addEventListener

JavaScriptdptj 이벤트를 달 때 사용하는 함수로써 사용법은 아래와 같다.

이벤트를받을요소.addEventListener(이벤트종류, 콜백함수)

이처럼 이벤트를 받을 요소에서 이벤트가 발생하면 인자로 받은 함수를 실행시키게 된다. 그리고 이러한 함수를 Callback함수라고 한다.(즉시 실행되지 않는 함수)

Click Event

가장 자주 쓰이는 이벤트로써 JavaScript로 클릭 이벤트에 맞는 리액션을 프로그래밍할줄 알아야 된다. 예를 들어 로그인 버튼을 클릭하는 이벤트가 발생하면 로그인 api를 호출해야 하고, 상품 사진을 클릭하는 이벤트가 발생하면 상품 상세 페이지로 이동시킬 수 있어야 된다. 이렇게 이벤트를 받을 요소들은 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('회원가입 성공!!');
});

예를 들어 다음과 코드가 있다고 하면, 먼저 첫줄은 'login-btn'이라는 class를 가진 요소중에 0번째 index인 요소를 thisIsButton으로 지정해주었다.
그 다음, addEventListener를 통해 click 이벤트가 발생하면 다음과 같은 함수가 실행되도록 하였다.
함수안에서도 password 와 rePassword라는 요소에 접근하여, 첫번째부터 !password (password값이 false)이면, 비밀번호를 입력해주세요!라는 경고창을 띄우고,
두번째로 !rePassword (!password값이 false)이면, 비밀번호 확인을 입력해주세요!라는 경고창을 띄워준다.
마직막으로는 password !== rePassword, 두개의 값이 다르면 비밀번호가 맞지 않습니다!라는 경고창을 띄우고
마지막에 아무 조건에도 걸리지 않는다면 회원가입 성공!의 경고창을 띄워서 이벤트를 종료하게 된다