이벤트 02.웹페이지 시작하기

Javascript 이벤트

이벤트(event)

• 이벤트란 웹브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미한다.

이벤트 타입(event type)

• 이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트명(event name)이라고도 한다.
• 가장 많이 사용하는 키보드,마우스,HTML DOM, Window객체 등을 처리하는 이벤트가 폭넓게 제공된다.

이벤트 리스너(event listener)

• 이벤트리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수이다.
• 이벤트핸들러(event handler)라고도 한다.
• 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

객체.addEventListener('이벤트이름', 콜백함수);

• 이벤트를 감지하는 것은 미리 구현해 놓을 수 있지만 어떤 이벤트가 발생했을 때 어떤 동작을 수행할지는 웹 페이지마다 다를 수 밖에 없으므로 미리 구현해 놓을 수 없다. (페이지마다 개별 구현이 필요함)
• 이벤트를 감지하는 기능이 수행할 동작을 콜백함수로 요구한다.

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

• 자바스크립트 코드에서 프로퍼티 등록 : 이벤트 타입별로 오직 하나의 이벤트 리스너만 등록할 수 있다는 것이 단점이다.
• HTML태그에 속성으로 등록 : HTML 코드에 자바스크립트 코드가 추가됨으로써 가독성이 안좋아지며, 유지보수도 힘들다.

02.객체나 요소에 이벤트 리스너로 전달하는 방법

• addEventListener()
• attachEvent()

대상객체.addEventListener('이벤트명', 실행할이벤트리스너,이벤트전파방식);
1. 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달합니다.
2. 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달합니다.
3. 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파합니다.

---

Javascript 이벤트 종류

마우스관련

이벤트	이벤트 핸들러	설 명
click	OnClick	대상을 클릭했을 경우
dbclick	InDbclick	대상을 더블클릭했을 경우
mousedown	OnMouseDown	마우스 단추를 눌렀을 경우
mouseup	OnMouseUp	마우스 포인터를 위치했다가 벗어났을 경우
mousemove	OnMouseMove	마우스를 움직였을 경우
mouseout	OnMouseOut	대상에서 마우스 포인터가 벗어났을 경우
mouseover	OnMouseOver	대상에 마우스 포인터가 위치했을 경우
dragdrop	OnDragDrop	대상을 클릭한 상태에서 이동했을 경우

키보드 관련

이벤트	이벤트 핸들러	설 명
Keydown	OnKeyDown	키가 눌러져 있는 동안 반복 실행된다.
keyup	OnKeyUp	키를 눌렀다가 놓았을 경우
keyprss	OnKeyPress	화면에 출력되는 키가 눌러질 경우 (한글동작안함)

form 요소 관련

이벤트	이벤트 핸들러	설 명
submit	OnSumit	입력 양식을 서버로 보냈을 경우 (submit버튼을 누른 경우)
change	OnChange	대상에 입력되어 있는 값이 바뀌었을 경우. 입력상자,체크박스,라디오,드롭다운에 적용
blur	OnBlur	대상에서 포커스가 빠져나간 경우
focus	OnFocus	대상에 포커스가 들어 왔을 경우
reset	OnReset	대상을 재시작 시켰을 경우(주로 form)
select	OnSelect	입력 양식의 한 필드를 선택했을 경우

브라우저 관련

이벤트	이벤트 핸들러	설 명
abort	OnAbort	이미지를 읽다가 중단했을 경우
error	OnError	에러가 발생했을 경우
load	OnLoad	대상을 열었을 경우 (주로 페이지 로딩 직후를 의미)
move	OnMove	윈도우나 프레임을 움직였을 경우
resize	OnResize	윈도우나 프레임의 크기가 변경했을 경우
unload	OnUnload	대상을 종료했을 경우

트랜지션 관련

이벤트	이벤트 핸들러	설 명
transitionrun	OnTransitionRun	트랜지션이 동작하는 동안
transitionstart	OnTransitionStart	트랜지션이 시작된 경우
transitioncancel	OnTransitionCancel	트랜지션이 취소된 경우
transitionend	OnTransitionEnd	트랜지션이 종료된 경우