Event

addEventListener

이벤트를 달 때 사용하는 함수 이름은 addEventListener입니다. event listener 단어를 해석하면 이벤트를 듣고 있다는 뜻이겠죠. addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜줍니다.

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

클릭이벤트

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 이벤트가 발생) 하면,두 번째 인자로 넘긴 함수가 실행됩니다.

키이벤트

• 키보드를 눌렀을 때 발생하는 keydown
• 키보드를 누르고 떼는 순간 발생하는 keyup
• 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress

이중에 keydown 이벤트로 addEventListener 추가해봅시다.

const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');

thisIsPw.addEventListener('keydown', function(event) {
  thisIsCode.innerHTML = event.code; 
});

아까 getElementsByClassName 으로 요소를 찾으면 배열이 return 되어서 [0] 으로 접근해야 했는데,이번에는 getElementById으로 바로 사용할 수 있습니다.

const thisIsPw = document.getElementById('password');

id는 중복이 될 수 없으니 전체 페이지에서 요소가 한 개밖에 없어서 배열로 return되지 않고 요소가 return된 것입니다. input#password 요소에 keydown이라는 이벤트가 발생하면 걸릴 수 있도록 eventListener를 추가하였습니다.

thisIsPw.addEventListener('keydown', function(e) {
  thisIsCode.innerHTML = e.code;
});

input에 키보드로 뭔가를 누르면 두 번째 인자인 function이 실행됩니다. 그래서 키보드를 누르면 span#code의 내용에 e.code 가 들어가게 됩니다. 여기서 code 는 입력된 키의 이름 정보를 의미합니다.

(IE의 경우, e.code 대신 e.keyCode 로 입력된 키의 정보를 받아옵니다 😕 )

평소에 다른 웹 사이트에서 로그인 할 때, 어디는 엔터를 치면 로그인이 되고, 어디는 엔터쳐도 로그인이 되지 않아 불편하다고 생각했을 것입니다. 이는 프론트엔드 개발자가 key 이벤트를 추가해서 엔터를 감지하여 로그인이 되도록 프로그래밍을 했느냐, 아니냐의 차이입니다.

enter키의 code는 'Enter' 입니다. 따라서 아래와 같이 코드를 짤 수 있습니다.

thisIsPw.addEventListener('keydown', function(e) {
  if (e.code === 'Enter') {
     //로그인 함수로 이동
  }
});

33-4 에서 클릭 이벤트를 했을 때는 두 번째 인자로 받는 함수에 e 라는 인자가 없었는데,이 번에는 추가했습니다. 이와 같이 두 번째 인자로 들어오는 함수에서 항상 event와 관련된 정보를 인자로 받을 수 있습니다.

console.log(e) 

Assignment

이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.

• input#re-password에 keyup 이벤트를 추가해주세요.
• input#password 와 input#re-password의 value 속성을 통해 input에 작성된 값을 가져오고,
• 서로 같은지 아닌지 확인해서 같지 않다면
• <p>태그의 .alert 클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣어주세요.
• 서로 비밀번호가 같다면 "" 빈 문구를 넣어주시면 됩니다.

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 thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');

thisIsPw.addEventListener('keydown', function(event) {
  thisIsCode.innerHTML = event.keyCode;
});

const checkRePw = document.getElementById('re-password');
const checkPw = document.getElementById('password');

checkRePw.addEventListener('keyup', function(e) {
  const addP = document.getElementsByClassName('alert')[0];
  const cPw = document.getElementById('password').value;
  const cRePw = document.getElementById('re-password').value;
  console.log(e.key) // keyup 할 때마다 키 값 콘솔에 출력 이거와 비교하면 안됨
  // 밖에다 해놓고 value로 불러와도 적용 가능
  // 둘 다 가능 근데 코드블록안에있는 변수 쓰는것이 더 좋을라나? scope pollution 과 관련 있을라나...
  // if(cPw !== cRePw)
  // if(checkPw.value !== checkRePw.value)
  if(cPw !== cRePw) {
    addP.innerHTML = '비밀번호가 일치하지 않습니다'
  } else {
    addP.innerHTML = '';
  }  
})