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


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

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

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

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

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

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

* 이벤트 핸들러 사용

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

 

<HTML>

<BODY>

<FORM>

<INPUT TYPE="button" VALUE="눌러보세요!" onClick="alert('Hello Everyone!');">

</FORM>

</BODY>

</HTML>

 

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

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

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

 

<HTML>

<HEAD>

<SCRIPT Language="JavaScript">

function func()

{

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

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE="button" VALUE="눌러보세요!" onClick="func();">

</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객체

 

이미지 맵

'IT Computer Utility/ETC' 카테고리의 다른 글

이전 글 다음 글