Event(이벤트)

좋은 웹사이트란 무엇일까? 웹사이트 내 오류가 없고, 이동이 자연스럽고 부드러워야 하며, 클릭했을 때 빠르게 반응해서 사용자의 분노를 일으키지 않는 사이트가 좋은 사이트일 것이다. 특히 요즘에는 화려하고 다양한 기능이 들어가는 웹 사이트가 늘어나면서 프론트앤드 개발자가 처리해야할 interaction이 더 많아졌다.

interaction의 기능은 다양하다. 예를 들어 옷 쇼핑몰에서 사진 위에 마우스를 올렸을때(mouse over) 다른 각도의 제품 사진으로 바꿔서 보여주는 것 등이 있다.

interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요하다. 이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.

이벤트의 종류는 클릭 이벤트, 마우스 이벤트, 스크롤 이벤트, 터치 이벤트
resize(화면 크기 변화) 이벤트 등 다양하다.

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

김버그님은 이벤트는 '이마트'라고 하셨다. 재고를 채워 넣고, 유저에 따라 어떤 일이 생길지 모르기 때문에 유저 행동에 따라 처리하는 방법을 짜는 것!

addEventListener

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

elementDiv(주체 요소 타입).addEventListener(이벤트 종류, function() {
}, option(T/F);

• addEventListener는 3개의 인자를 받는다. (type, handler, option(T/F)
• 특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수(콜백 함수)를 전달한다.

이벤트 종류

클릭(click) 이벤트

• 버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많이 쓰이는 이벤트!
• 프론트앤드 개발자는 버튼, 사진, 글 등의 요소마다 클릭 이벤트를 달아서 각자 클릭이벤트에 맞는 reaction을 프로그래밍한다.
  - 로그인 버튼 클릭 -> 로그인 api 호출
  - 상품 사진 클릭 -> 상품 상세 화면으로 이동
  - 자세히 보기 버튼 클릭 -> 팝업화면 출력

const thisIsButton = document.getElementByClassName('login-btn')[0];
//클래스 이름이 중복될 수 있으므로 [index] 붙여줌
thisIsButton.addEventListener('click', fuction() {
 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('회원가입 성공!');
});

키(key) 이벤트

유저가 키보드를 누를때 발생하는 이벤트

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

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

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

• Enter 이벤트 추가

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

• 두 번째 인자로 받는 함수에 e event를 추가하면 event와 관련된 정보를 인자로 받을 수 있다.

기타 이벤트

• load : 파일 로딩 후 다 끝날때 방출!
• scroll: 유저가 스크롤중
• resize : 화면사이즈 조정
• blurr/ focus : focus events
• blurr/ focus : focus events
• change : input, texarea 값이 바뀌었을 때
• submit : submit 발생
• mousedown : 마우스를 눌렀을 때 *db click은 버그가 많아 잘 안쓰는게 좋아
• mouseenter : 진입
• mouseleave : 진입했다 나갈 때 (hover)
• mouseup : 마우스 손뗄 때
• touchstart/touchend/touchmove: 모바일에서의 터치