JavaScript Event Listener 종류

JavaScript에서는 웹 페이지의 다양한 작용을 감지하기 위해 여러 이벤트 리스너를 사요할 수 있다.

 

사용자 입력 이벤트

1. click: 클릭 시 발생
2. dbclick: 더블 클릭 시 발생
3. mousedown: 마우스 버튼을 누를 때 발생
4. mouseup: 마우스 버튼에서 손을 뗄 때 발생
5. mousemove: 마우스가 움직일 때 발생
6. mouseenter: 마우스가 요소 경계 안으로 들어올 때 발생
7. mouseleave: 마우스가 요소 경계 밖으로 나갈 때 발생
8. mouseover: 마우스가 요소 위로 이동할 때 발생
9. mouseout: 마우스가 요소를 벗어날 때 발생
10. contextmenu: 요소에 대해 컨텍스트 메뉴를 열려고 할 때 발생
11. keydown: 키보드 키를 누를 때 발생
12. keyup: 키보드 키에서 손을 뗄 때 발생
13. keypress: 키보드 키를 누르고 있을 때 연속적으로 발생

 

UI 상태 변경 이벤트

1. focus: 요소가 포커스를 받을 때 발생
2. blur: 요소가 포커스를 잃을 때 발생
3. change: 입력 필드의 값이 변경되고 포커스가 이동 했을 때 발생
4. input: 입력필드에 입력할 때 발생
5. submit: 폼이 제출될 때 발생
6. reset: 폼 리셋 버튼이 클릭될 때 발생

 

네트워크 상태 이벤트

1. load: 페이지, 이미지 , 파일 등이 완전히 로드 됐을 때 발생
2. unload: 페이지가 언로드 되기 직전에 발생
3. beforeunload: 페이지를 떠나기 직전에 발생
4. error: 로드 중 오류가 발생 했을 때 발생

 

기타 이벤트

1. resize: 브라우저 창의 크기가 발생 될 때 발생
2. scroll: 스크롤 할 때 발생
3. animationstart: CSS 애니메이션이 시작될 때 발생
4. animationend: CSS 애니메이션이 끝났을 때 발생
5. transitionend: CSS 전환 효과가 끝났을 때 발생

 

예시

window.addEventListener('load', () => {
    console.log('페이지가 완전히 로드되었습니다.');
});