[JavaScript] event(이벤트)

event(이벤트)

특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다. 이벤트의 종류에는 다음과 같은 것들이 있다.

• 클릭 이벤트
• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면 크기 변화) 이벤트 등등

JavaScript에서 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그래밍을 작성해야한다.

읽어보기

MDN - Event

addEventListener

이벤트를 달 때 사용하는 함수 이름은 addEventListener이다.
addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다.

모양은 아래와 같다. 어떻게 생겼는지 형태를 보자

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

특정 요소에 addEventListener 함수를 붙이고(호출하고),
인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달한다.

그 동안에 인자로 배열, String, Number, Date 객체는 전달하는 것을 봤는데, 함수도 인자로 전달할 수 있구나!

이렇게 인자로 전달된 함수를 '콜백 함수'라고 부른다.

자주 쓰이는 이벤트 종류

• click

target.addEventListener('click', onceHandler, once);
function onceHandler(event) {
	alert('outer, once');
}

• contextmenu
• dblclick
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseover
• mouseout
• mouseup
• pointerlockchange
• pointerlockerror
• select
• wheel

읽어보기

MDN - EventTarget.addEventListener()

클릭이벤트

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

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

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

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

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

한 줄씩 자세히 보자. 자세히 보아야 예쁘다.

// getElementsByClassName 함수로 login-btn라는 클래스 이름이 있는 요소를 찾는다.
const thisIsButton = document.getElementsByClassName('login-btn')[0];
// 뒤에 [0]은 왜 붙었을까?
// class 이름은 여러 요소에 중복해서 이름을 줄 수 있다.
// 그래서 getElementsByClassName으로 요소를 찾으면 여러 요소가 담긴 '배열'이 봔환된다.
// 해당 클래스 이름을 가진 요소가 하나 밖에 없으면 요소가 하나인(배열 길이가 한 개인)배열이 반환된다.

// 위에서 thisIsButton 이라는 변수에 .login-btn 요소를 찾아서 저장했다.
// 그 요소에 addEventListener을 달아준다.
thisIsButton.addEventListener('click', function() {
	//click 했을 때 실행되어야할 기능
});
// 첫 번째 인자에 'click'이라고 세팅했다.

// 앞으로 thisIsButton.login-btn을 클릭(click 이벤트가 발생)하면, 두 번째 인자로 넘긴 함수가 실행된다

키이벤트

키이벤트는 사람이 키보드를 누르면 발생하는 이벤트다.

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

이중에 keydown 이벤트로 addEventListener를 추가해보자.

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

thisIsPw.addEventListener('keydown', fuction(e) {
	thisIsCode.innerHTML = e.keyCode;                          
});

한 줄씩 자세히보자. 자세히 보아야 예쁘다.

// id는 중복이 될 수 없으니 전체 페이지에서 요소가 한 개밖에 없어서
// class와 다르게 배열로 return되지 않고 요소가 return된다.
const thisIsPw = document.getElementById('password')

// input#password 요소에 keydown이라는 이벤트가 발생하면 
// 걸릴 수 있도록 eventListener를 추가하였다.
thisIsPw.addEventListener('keydown', function(e) {
	thisIsCode.innerHTML = e.keyCode;
});
// input에 키보드로 뭔가를 누르면 두 번째 인자인 function이 실행된다.

key code란 각 키보드가 갖고 있는 고유한 code이다.

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

참고로 enter키의 key code는 13이다.
그래서 아래와 같이 코드를 짤 수 있다.

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

// 클릭이벤트를 했을 때는 두 번째 인자인 함수에 e라는 인자가 없었는데, 이번에는 추가했다.

// 원래 두 번째 인자인 함수에 항상 event와 관련된 정보를 인자로 받을 수 있다.               

📖 위스타그램 로그인화면 클론에서 DOM과 Event에 대해서 정리

"use strict";

const idInput = document.getElementsByClassName("idPasswordForm")[0];
const pwInput = document.getElementsByClassName("idPasswordForm")[1];
const btnInput = document.getElementsByClassName("loginInput")[0];
const btnColor = document.getElementsByClassName("loginBtn")[0];

btnInput.addEventListener("keyup", function () {
  if (idInput.value && pwInput.value) {
    btnColor.style.backgroundColor = "#0295F6";
  } else if (idInput.value || pwInput.value === 0) {
    btnColor.style.backgroundColor = "#C1DFFC";
  }
});

한 줄씩 자세히보자. 자세히 보아야 예쁘다.

// getElementsByClassName 함수로 idPasswordForm이라는 클래스 이름이 있는 요소를 찾는다.
// 여러 요소가 담긴 배열이 반환되는데 배열의 0번째 요소를 찾아서
// idInput이라는 변수에 저장했다.
const idInput = document.getElementsByClassName("idPasswordForm")[0];

btnInput.addEventListener("keyup", function () {
  if (idInput.value && pwInput.value) {
    btnColor.style.backgroundColor = "#0295F6";
  } else {
    btnColor.style.backgroundColor = "#C1DFFC";
  }
});
// btnInput이라는 변수에 .loginInput 요소를 찾아서 저장했다.
// 그 요소에 addEventListener를 달아주었다.

// idInput과 pwInput이라는 변수에 .idPasswordForm[0] 요소와 
// .idPassWorldForm[1] 요소를 각각 찾아서 저장했고,
// 이 요소(객체)의 값(value)에 if 조건문을 달아주었다.
// 첫 번째 조건문은 두 요소의 값이 1 이상일 때
// btnColor 변수에 저장된 .loginBtn의 배경색을 
// "#0295F6"으로 바꿔준다는 것이고,
// 첫 번째 조건문에 해당되지않으면,
// 원래의 배경색인 "#C1DFFC"로 바꿔준다.

🙏 고쳐야할 내용

// 처음 코드
document.addEventListener("keyup", function () {
  if (idInput.value > 0 && pwInput.value > 0) {
    btnColor.style.backgroundColor = "#0295F6";
  } else {
    btnColor.style.backgroundColor = "#C1DFFC";
  }
});

// 멘토 리뷰 반영
btnInput.addEventListener("keyup", function () {
  if (idInput.value && pwInput.value) {
    btnColor.style.backgroundColor = "#0295F6";
  } else {
    btnColor.style.backgroundColor = "#C1DFFC";
  }
});

// 특정 요소에 addEventListener 함수를 붙일 때(호출할 때)
// document(html, 전역객체)를 선택하지 말고,
// 적용하려는 요소의 상위 컨테이너를 선택하자.

// 더 간결하게 코드를 작성하자.

👍 로직을 이해하도록 하자. 계속 하자.