자바스크립트(JavaScript) 기초강좌 - 4장. 이벤트와 이벤트 헨들링

2009. 2. 20. 21:21 IT Computer Utility/ETC ·

자바스크립트(JavaScript) 기초강좌 - 4장. 이벤트와 이벤트 헨들링

4장. 이벤트와 이벤트 핸들링

4.1) 이벤트와 이벤트 핸들러

* Event는 Web Browser에서 일어나는 어떤 사건을 말한다. 즉 사용자가 버튼을 클릭하거나, 폼을 전송하거나, 마우스를 글자 위에 가져 간다거나, 브라우저를 종료 시키는 등의 행위가 바로 이벤트라고 할 수 있다.

이벤트 핸들러(Event Handler)는 이러한 이벤트를 처리해 주는 것을 말한다. 예를 들어 사용자가 버튼을 클릭하면 이를 인식하고 정의된 코드를 실행시켜 주는 것이 바로 이벤트 핸들러의 역할이다.

이벤트 핸들러는 이벤트에 on을 붙이는 형식으로 표현하며 일반적으로 HTML태그에 포함시켜 사용한다.

* 이벤트 핸들러 사용

버튼을 누를 때 click()이벤트가 발생하며, 이 이벤트를 onClick이벤트 핸들러가 받아서 처리한다.

<HTML>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

* 이벤트 핸들러에서의 함수호출

자바스크립트에서의 함수호출은 이벤트 핸들러를 이용하는 경우가 일반적이다.

즉 함수를 스크립트 문에 넣어 두고 부분에서 필요할 때 호출하는 형식을 많이 사용한다.

<HTML>

<HEAD>

function func()

{

alert("자바누리 자바스크립트 강좌입니다.");

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

4.2) 이벤트 핸들러의 종류

브라우저에 따라 사용할 수 있는 이벤트 핸들러와 각각의 이벤트 핸들러가 사용될 수 있는 태그는 차이가 있다.

이벤트 핸들러	이벤트 발생시점	사용태그 or 객체
onAbort	이미지 읽는 것을 취소할 때	img
onBlur	포커스를 잃어버렸을 때	모든 Form요소, body, window객체
onChange	Form요소의 값이 변했을 때	INPUT TYPE=text, Select, Textarea
onClick	마우스를 클릭했을 때	A, Area, Input Type=button, Checkbox, Radio, Reset, Submit, Document객체
onDblClick	마우스를 더블 클릭했을 때	A, Area, Input Type=button, Checkbox, Radio, Reset, Submit, Document객체
onError	이미지나 문서를 불러올 때, 에러가 났을 때	img, window객체
onFocus	포커스를 받을 때	모든 Form요소, body, window객체
onKeydown	Key가 눌러졌을 때	A, Area, Img, Textarea, document객체
onKeypress	Key를 눌렀다 놓았을 때	A, Area, Img, Textarea, document객체
onKeypress	Key를 눌렀다 놓았을 때	A, Area, Img, Textarea, document객체
onKeyup	Key를 놓았을 때	A, Area, Img, Textarea, document객체
onLoad	문서의 로딩이 완료되었을 때	Img, Body, Frameset, Window객체
onMousedown	마우스 버튼을 눌렀을 때	A, Area, Input Type=button, document객체
onMouseup	마우스 버튼을 놓았을 때	A, Area, Input Type=button, document객체
onMousemove	마우스가 움직일 때
onMouseout	해당 영역을 벗어났을 때	A, Area
onMouseover	해당 영역에 마우스를 놓았을 때	A, Area
onReset	Reset 버튼을 눌렀을 때	form
onResize	Frame이나 윈도우의 크기가 변경될 때	Window객체
onSelect	해당 Field를 선택했을 때	Input Type=text, textarea
onSubmit	Submit 버튼을 눌렀을 때	Form
onUnload	해당 문서를 빠져 나갈 때	Body, Frameset, Window객체