Day005 이벤트와 이벤트 핸들링

1 이벤트와 이벤트 종류

이벤트란?
웹 브라우저의 사용자가 마우스를 클릭하거나 마우스를 움직일 때 키를 입력하는 순간 등 사용자 행동의 발생을 자바스크립트 엔진 내부에 알리는 통지(notification)라고 정의 할 수 있습니다.

이벤트 핸들러란?
이벤트의 발생시 상응하는 작용을 하기 위해 작성된 자바스크립트 코드를 말합니다. 예를 들어 어떤 이미지 위에 마우스가 올라갔을 때 음악을 연주하고자 한다면 마우스가 이미지 뒤에 올라갔음을 알리는 mouseover 이벤트를 받아 이를 처리하기 위한 onmouseover 이벤트 핸들러 코드를 이미지 객체에 작성하여 음악 연주를 시작하도록 하면 됩니다.

이벤트 종류
익스플로러에서 지원되는 이벤트의 종류는 70남짓으로 이 각각의 이벤트 핸들러 이름은 이벤트 이름에 on을 붙인 것과 같습니다.

Anchor | anchors array | Applet! | applet!s array | Area | Array | Button | Checkbox | Date | document | FileUpload | Form | forms array | frames array | Hidden | History | history array | Image | images array | Layers | layers array | Link | links array | location | Math | MimeType | mimeTypes array | navigator | Number | Option | options array | Password | Plugin | plugins array | Radio | radio array | Reset | screen | Select | String | Submit | Text | Textarea | window
※ 녹색은 네츠케이프, 혹은 익스플로러 전용으로만 사용되는 객체(속성,메소드)입니다
객체(Object)	속성(Property)	메소드(Method)	이벤트핸들러(Event Handler)
Anchor	name text x y
anchors array	length
Applet!		applet!'s methods
applet!s array	length
Area	hash host gostname href pathname port protocol search target		onClick onmouseOut onmouseOver
Array	length	concat join pop push reverse shift slice sort unshjft
Button	form name type value	blur click focus	onClick onmouseDown onmouseUp
Checkbox	checked defaultChecked form name type value	blur click focus	onClick onmouseDown onmouseUp
Date		getDate getDay getFullYear getHours getMilliseconds getMinutes getMonth getSeconds getTime getTimezoneOffset getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMilliseconds getUTCMinutes getUTCMonth getUTCSeconds getYear parse setDate setFullYear setHours setMilliseconds setMinutes setMonth setSeconds setTime setUTCDate setUTCHours setUTCMilliseconds setUTCMinutes setUTCMonth setUTCSeconds setYear goGMTString toLocaleString toString toUTCString UTC valueOf
document	activeElement alinkColor all Anchor anchors Applet! applet!s Area bgColor body charset children cookie defaultCharset domain embed embeds expando fgColor Form forms Image images lastModified Layer layers linkColor Link links location parentWindow plugins readyState referrer scripts selection styleSheets title URL vlinkColor	clear close createElement createStylesheet elementFromPoint getSelection open write writeIn
FileUpload	form name type value	blur focus select	onBlur! onFocus onSelect
Form	action Button Checkbox elements encoding FileUpload Hidden length method name Password Radio Reset Select Submit target Text Textarea	reset submit	onReset onSubmit
forms array	length
frames array	length
Hidden	form name type value
History	current length next previous	back foward go
history array	length
Image	border complete height hspace lowsrc name src vspace width x y		onAbort onError onLoad
images array	length
Layers	above background below bgColor clip document hidden left name pageX pageY parentLayer siblingAbove siblingBelow src top visibility window x y zindex	load moveAbove moveBelow moveBy moveTo! moveTo!Absolute resizeBy resizeTo!	onBlur! onFocus onmouseOut onmouseOver onmouseUp
layers array	length
Link	hash host hostname href pathname port protocol search target text x y		onClick onmouseOut onmouseOver
links array	length
location	hash host hostname href pathname port protocol search	reload replace
Math	E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2	abs acos asin atan atan2 ceil cos exp floor log max min pow random round sin sqrt tan
MimeType	description enabledPlugin suffixes type
mimeTypes array	length
navigator	appCodeName appMinorVersion appName appVersion browserLanguage cookieEnabled cpuClass languages mimeTypes platform plugins systemLanguage userAgent userLanguage userProfile	javaEnabled preference savePreferences taintEnabled
Number	MAX_VALUE MIN_VALUE NaN NEGATIVE_INFINITY POSITIVE_INFINITY	toString valueOf
Option	defaultSelected index selected selectedIndex text value
options array	length
Password	defaultValue form name type value	blur focus select	onBlur! onChange onFocus onKeydown onKeypress onKeyup onSelect
Plugin	description filename name	refresh
plugins array	length
Radio	checked defaultChecked form name type value	blur click focus	onClick onmouseDown onmouseUp
radio array	length
Reset	form name type value	blur click focus	onClick onmouseDown onmouseUp
screen	availHeight availLeft availTop availWidth BufferDepth colorDepth height pixelDepth updayeInterval width
Select	form length name options selectedIndex type	blur focus	onChange
String	length	anchor big blink bold charAt charCodeAt concat fixed fontcolor fontsize formCharCode indexOf italics lastIndexOf link match replace search slice small split strike sub substr substring sup toLowerCase toUpperCase
Submit	form name type value	blur click focus	onClick onMouseDown onMouseUp
Text	defaultValue form name type value	blur click focus select	onBlur! onChange onFocus onKeydown onKeyup onSelect
Textarea	defaultValue form name type value	blur click focus select	onBlur! onChange onFocus onKeydown onKeyup onSelect
window	clientInformation closed defaultStatus dialogArguments dialogHeight dialogLeft dialogLeft dialogTop dialogWidth document event frames history innerHeight innerWidth length location locationbar menubar name navigator offscreenBuffering opener outerHeight outerWidth pageXOffset pageYOffset parent personalbar screen screenX screenY scrollbars self status statusbar toolbar top	alert! back blur close confirm! find focus forward home moveBy moveTo! navigate open print prompt resizeBy resizeTo! scroll scrollBy scrollTo stop	onBlur! onError onFocus onLoad onResize

이벤트 처리의 특징
1. 이벤트는 이벤트를 받는 객체에서 처리됩니다.
발생한 이벤트는 이벤트 목적 객체에 우선 전달되어 처리 됩니다. 만일 어떤 버튼 객체를 사용자가 클릭 였다면 클릭 이벤트가 발생하게 되고 자바스크립트 엔진은 클릭 이벤트가 발생한 버튼 객체의 온클릭 핸들러를 호출할 것입니다. 즉, 현재 HTML 문서의 다른 객체들도 온클릭 핸들러를 가지고 있다 하더라도 이벤트가 발생한 목적 객체인 버튼 객체의 온클릭 핸들러가 호출됩니다.
2. 모든 객체가 모든 이벤트를 받을 수 없습니다.
모든 객체가 이벤트를 모두 받을 수 있는 것은 아닙니다. 객체마다 이벤트를 받을 수 있는 것과 없는 것으로 구분 됩니다.


이벤트 핸들러의 작성 방법

이벤트 핸들러를 작성하는 방법에는 크게 3 가지로 구분할 수 있습니다.

HTML 태그내에 이벤트 핸들러 코드를 작성 객체의 이벤트 핸들러 속성에 직접 코드를 대입 <script> 태그 직접 사용

HTML 태그내에 이벤트 핸들러 코드를 작성 <태그이름 이벤트 핸들러="자바스크립트 코드"> <body onload="alret('문서의 로딩이 완료되었습니다')"> <input type="button" onclick="document.bgColor='blue'"> 함수를 사용하여 호출할 수도 있다 <script> fuction f(){} </script> <input type = "button" onclick="f()">

객체의 이벤트 핸들러 속성에 직접 코드를 대입 <script> function docClick(){ alert("문서를 클릭하셨습니다"); } document.onclick = docClick; </script>

<script> 태그 직접 사용 <태그 id="xxx"> .................................. <script for="xxx" event="이벤트 핸들러 이름" language="JScript"> .........이벤트를 처리할 자바 스크립트 코드.... </script>

이벤트 핸들러의 고유한 행위를 취소하는 방법

<a href=http://www.daum.net onclick="return false">이동할 수 없는 링크</a> 이벤트 핸들러가 false를 리턴하면 내부적으로 발생한 이벤트의 고유한 행위는 취소 된다.  <a href=http://www.daum.net onclick="return f()">이동할 것인지 물어보는 태그</a> 물론 이 태그에서 f()는 구현이 되어 있는 함수이어야 한다.

2. 이벤트 핸들링
onabort
이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)
onactivate
개체가 활성화될 때 발생
(태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)
onafterprint
문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생
onafterupdate
데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되었을 때 발생(데이터 개체부분 참조)
onbeforeactivate
개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)
onbeforecopy
선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생
onbeforecut
선택 영역이 지워지기 바로 직전에 발생
onbeforedeactivate
부모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔 때 발생
(activeElement는 개체를 지칭하는 예약어로도 쓰임)
onbeforeeditfocus
편집가능한 개체 내부에 포함된 개체가 편집활성화된 상태가 되거나 혹은 편집가능한 개체가 제어를 위해 선택될 때
onbeforepaste
시스템의 클립보드에서 문서로 붙여넣기 될 때 대상 개체에서 발생
onbeforeprint
문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생
onbeforeunload
페이지가 언로드되기 직전에 발생
onbeforeupdate
데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되기전에 발생 (데이터 개체부분 참조)
onblur
개체가 포커스를 잃었을 때
onbounce
마퀴태그에서 alernate상태에서 스크롤이 양 사이드에서 바운드될 때 발생
oncellchange
데이터 제공 개체에서 데이터가 변화할 때 발생
onchange
개체 혹은 선택영역의 내용이 바뀔 때 발생
onclick
개체위에서 마우스의 왼쪽 버튼을 누를 때 발생
oncontextmenu
클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생
oncontrolselect
사용자가 개체의 제어 영역을 만들 때 발생
oncopy
시스템의 클립보드에 선택영역 혹은 개체를 복사할 때 소스 개체로부터 발생
oncut
시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생
ondataavailable
비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할 때마다 정기적으로 발생
ondatasetchanged
데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될 때 발생
ondatasetcomplete
데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될 때 발생
ondblclick
사용자가 개체에 더블클릭 할때 발생
ondeactivate
모 문서에서 현재 개체에서 다른 개체로 activeElement가 변할 때 발생
ondrag
드래그 상태가 지속되는 동안 소스 객체로부터 발생
ondragend
드래그 상태가 끝날 때 소스 객체로부터 발생
ondragenter
사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역으로 이동할 때 타갯 개체에서 발생
ondragleave
사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역을 떠날 때 타갯 개체에서 발생
ondragover
사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역내에서 드래그할 때 계속적으로 타갯 개체에서 발생
ondragstart
선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생
ondrop
드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타갯 개체에 드롭되었을 때 타갯 개체에서 발생
onerror
개체가 로드되는 동안 발생하는 이벤트
on


3. 이벤트 버블(Event Bubble) 및 흐름 제어

이벤트는 대상 객체에 처음으로 발생하고 다시 객체의 계층 구조를 따라 window까지 위로 흘러간다. 예를 들어 div태그내에 p와 hr이 존재하는 HTML 문서가 출력된 웹브라우저상에서 사용자가 hr에 의해출력된 수평선 위에서 마우스를 클릭하면 hr 객체에 클릭 이벤트가 전달되고 다시 div객체로 클릭이 전달되며 그리고 나서 다시 document로 끝에 가서는 window에까지 도달된다. 이것이 이벤트가 흘러가는 경로이고 이벤트가 흘러가는 현상 자체를 이벤트 버블이라고 부른다.
모든 이벤트에 대해 이벤트 버블이 발생하는 것은 아니고 이벤트 버블은 강제로 막을 수도 있다.

event 객체에 프로퍼티 추가하여 버블현상 막기

event.cancelBubble= true; 결과값:

4. event 객체
이벤트 객체는 이벤트가 발생할 때마다 현재 발생한 이벤트에 대한 다양한 정보를 제공하는 임시 객체입니다. 이벤트 객체는 현재 이벤트가 소멸되면 함께 소멸됩니다.
이벤트 객체가 가진 정보는 마우스의 클릭 위치, 입력된 키 값, 이벤트가 발생한 객체, 이벤트 타입 등 많은 정보가 있으며 지원하는 메소드는 없습니다.