[자바스크립트] 이벤트(event) 호출

이벤트(event)란? 

웹페이지에서 마우스를 클릭했을 때,

키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

 

이벤트 타입 event type 

발생할 이벤트의 종류를 나타내는 문자열 

마우스 이벤트	설명
mouseover	요소에 마우스 오버했을 때 이벤트 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트 발생
mouseup	요소에 마우스를 떼었을 때 이벤트 발생
mousemove	요소에 마우스를 움직였을 때 이벤트 발생
contextmenu	마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴가 나오기전 이벤트 발생

키 이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

폼 이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경되었을 때 이벤트 발생
submit	submit버튼을 눌렀을 대 이벤트 발생
reset	reset버튼을 눌렀을 대 이벤트 발생
select	input이나 특정 요소 안의 텍스트를 드래그해 선택했을 때 이벤트 발생

로드 /기타 이벤트	설명
onload()	페이지 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소가 사이즈 변경되었을 때
scroll	스크롤바 움직였을 때 이벤트 발생

---

객체나 요소에 프로퍼티로 등록하는 방법

1) 자바스크립트 코드에서 프로퍼티로 등록 (속성에 접근해 바로 함수를 넣어줌) 

2) HTML 태그에 속성으로 등록 

 

 이벤트 연결

사용자가 실제 이벤트를 발생시켰을 때, 그 이벤트에 대응해 처리하는 것  → 앞에 on을 붙여 주고 이벤트에 대한 동작

 

 

이벤트 리스너

이벤트가 발생했을 때, 처리를 담당하는 함수 (이벤트 핸들러)