목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.

1. event(이벤트)

---

🙌 이벤트는 굉장히 다양한 것들이 있다.

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

2. addEventListener

---

이벤트를 달 때 사용하는 함수 이름은 addEventListener 이다.

이벤트리스너 작성법은 다음과 같다.

요소.addEventListener(이벤트종류, function() {
  //이벤트 발생시 코드블럭 실행
});

이벤트가 발생하면 인자로부터 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달한다. 그 동안에 인자로는 배열, 문자형, 숫자형, 객체로 전달되는 것을 봤는데 함수도 인자로 전달할 수 있다. 이렇게 인자로 전달된 함수를 콜백함수라고 한다.

3. 이벤트 종류

---

링크: 이벤트 종류

4. 클릭이벤트

---

우리가 웹사이트를 만들면 그 중 가장 많이 쓰이는 것이 클릭 이벤트이다.

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

thisIsButton.addEventListener('click', function() {
  //click 했을 때 실행되어야할 기능
});

thisIsButton 을 클릭하면 두번째 인자로 넘긴 함수가 실행된다는 흐름이다.

5. 예제

---

그 밖에 다른 이벤트를 코드를 통해서 알아보자.

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

enter 키의 키 값은 13이다, 그 밖에 정보를 받아와서도 여러가지 if 문을 작성할 수 있다.

링크: 이벤트리스너