[Javascript] 자바스크립트 이벤트 종류 [이벤트 핸들러Event Handler]

이벤트란 웹 브라우저에서 일어나는 유용한 사건을 말합니다.

이벤트를 이용하면 사용자와 상호작용하는 웹 사이트를 만들 수 있습니다. 

10~20가지 이벤트가 존재하는데요, 다 외우는 것이 아니라 대부분 검색해서 사용합니다.

 

• 이벤트 검색하는 방법

예) 사용자가 클릭했을 때 이벤트가 발생하게 하고 싶은 경우
→ javascript onclick event 로 검색

 

1. 이벤트 핸들러(Event Handler) 

이벤트를 자바스크립트에서 인식할 수 있게 사용하는 명령어 입니다.

 

 

   1-1. 이벤트 핸들러 표기법

on 이벤트명 = "이벤트 발생 시 실행할 작업" 을 의미.
(속성이나 메소드, 이벤트 핸들러는 각 객체마다 다르게 구성됩니다.)

 

 

※ 대소문자 구분
 - 많은 클라이언트 측 자바스크립트 객체와 프로퍼티 이름은 HTML 태그나 태그 속성의 이름과 동일합니다.

 - HTML은 대소문자를 구별하지 않지만 자바스크립트는 대소문자를 구분하는 언어입니다. 
 - HTML에서는 태그나 속성 이름을 대소문자 구분 없이 입력해도 되지만, 자바스크립트에서는 모두 소문자로 입력해야 합니다.

예) HTML의 onclick 이벤트 처리기 속성은 종종 onClick으로 쓰곤 하지만 자바스크립트 코드로는 onclick으로 써야 합니다. 

 

 

 

구분	이벤트	설명
마우스 이벤트	onclick	클릭했을 때
	ondbclick	더블클릭했을 때
	onmouseup	마우스 버튼을 뗄 때
	onmousedown	마우스 버튼을 누를 때
	onmouseover	마우스 포인터가 요소 위에 올라갔을 때 시점
	onmouseout	마우스 포인터가 요소 밖으로 벗어난 시점
	onmousemove	마우스를 움직였을 때
키보드 이벤트	onkeydown	키보드의 키를 눌렀을 때의 시점
	onkeyup	키보드의 키를 눌렀다 떼는 시점
	onkeypress	키보드의 키를 눌러 문자가 연결되는 시점
포커스 이벤트	onfocus	요소가 포커스를 얻었을 때 시점
	onblur	요소가 포커스를 잃었을 때 시점
브라우저 등의 객체관련 이벤트	onload	대상을 열기 시작한 경우
	onupload	대상을 완료(종료)했을 경우
	onmove	윈도우가 이동되었을 경우
	onresize	윈도우의 크기를 변경했을 경우
폼 이벤트 (입력 양식 관련)	onchange	input 요소의 값이 바뀌었을 때
	onselect	입력양식의 한 필드를 선택했을 경우
	onsubmit	버튼을 클릭하여 폼 값을 제출할 때
	onreset	리셋버튼을 클릭할 때
	onabort	대상을 load하다 도중에 종료했을 경우
	onerror	에러가 났을 경우

 

 

• onclick 이벤트

- onclick속성의 속성값에는 무조건 자바스크립트가 와야합니다.
- 속성값을 웹브라우저가 기억하고 있다가 사용자가 태그를 클릭했을 때
   웹브라우저는 자바스크립트 코드를 동작합니다.
* <input>: 사용자가 데이터를 입력할 수 있는 입력 필드 지정
* type="button" : 버튼을 만들때 사용하는 속성
* value: 버튼 안에 글씨를 쓸때 사용하는 속성 이름
* "alert(' ')" : 경고창 발생

 

 

• onmouseover 이벤트

-마우스 포인터가 요소로 이동하거나 자식 중 하나로 이동할 때 이벤트 발생

 

 

• onmousemove 이벤트

- screenX, screenY는 화면을 기준으로 마우스의 움직임을 좌표로 표시해줍니다.
- X, Y는 부라우저를 기준으로 마우스의 움직임을 좌표로 표시해줍니다.
- offsetX, offsetY는 박스를 기준으로 마우스의 움직임을 좌표로 표시해줍니다.

 

 

• onkeydown 이벤트

- 사용자가 어떤 key를 눌렀을 경우 이벤트 발생

 

 

• onchange 이벤트

- 요소의 값이 변경될 때 이벤트 발생 = 입력된 값을 기억했다가 입력된 값이 변경된 경우

마우스 포인트를 바깥쪽으로 빼면 이벤트 발생
*type="text": 키보드를 이용해 입력할 때 사용하는 속성