Event
- interaction HTML이나 CSS만으로 구현할 수 없고, 자바스크립트 코딩이 필요하다
- 특정요소에 interactive한 반응을 할 수 있게 하는것
- 마우스 이벤트
- 스크롤 이벤트
- 터치 이벤트
- resize(화면 크기 변화) 이벤트
addEventListener
- 이벤트를 달 때 사용하는 함수이름
- 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행
- 인자로 전달된 함수(callback함수)
요소.addEventListener(이벤트종류, function(){
//이벤트가 일어났을 때 실행할 내용
});
클릭이벤트
- 로그인 버튼 클릭 -> 로그인 api 호출
- 상품 사진 클릭 -> 상품 상세 화면으로 이동
- 자세히 보기 버튼 클릭 -> 팝업화면 출력
- event 함수 추가 DOM사용

const thisIsButton = document.getElementsByClassName('login-btn')[0];
- thisIsButton이라는 변수에 .login-btn요소를 찾아 저장
- [0]이 붙은 이유: class는 중복해서 사용 할 수 있기 때문에 많아서 해당 요소를 가져오게 한다
thisIsButton.addEventListener('click', function() {
//click 했을 때 실행되어야할 기능
});
- 위 요소에 addEventListener을 달아준다
- 첫번째 인자에 실행할 이벤트명, 실행할 함수명
키 이벤트
- 키보드를 눌렀을 때 발생하는 keydown
- 키보드를 누르고 떼는 순간 발생하는 keyup
- 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress
마우스 이벤트
onMouseEnter
- 마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생하는 이벤트
- 요소 밖으로 나갔다 오지 않으면 계속 발생하지 않음
- 마우스가 오브젝트 위로 올라갔을 때 호출
onMouseOver
- onMouseOut의 반대 개념
- 마우스 포인터가 요소 안으로 들어올때 + 자식 요소 출입시 발생하는 이벤트
- 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올때 발생
- 마우스가 오브젝트 위에 있으면 계속 호출됨
onMouseOut
- onMouseOver의 반대개념
- 마우스 포인터가 요소 밖으로 나갈때 + 자식 요소 출입시 발생하는 이벤트
- 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생
onMouseMove
- 마우스 포인터가 요소 위에서 움직일 때(자식포함) 발생하는 이벤트
- 요소 위에서 마우스를 움직이면 계속 발생
onMouseExit
onMouseLeave
- 마우스를 해당 요소안에서 바깥으로 옮겼을때 발생
- 버블링이 발생하지 않는다
onMouseUp
- onMouseDown이 일어난 후에 마우스를 때면 호출(onMouseDown이 일어나지 않으면 호출되지 않음)
onMouseDown
- 오브젝트 위에서 마우스 왼쪽 버튼이 눌렸을때 호출