울어라휘파람새야

자바스크립트 이벤트 본문

밥줄/JavaScript

자바스크립트 이벤트

꼬꼬리코 2009. 12. 21. 14:53

자바스크립트 이벤트 .....................................................


아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.

예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비!
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가...

(Click, MouseOver, MouseOut, Submit...)

이벤트 핸들러란 ?

이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다
(onClick,onMouseOver,onMouseOut, onSubmit...)

* 그래서 우리가 할일은 이벤트가 일어났을 때 할 일을 준비하고
이벤트 핸들러에게 그 일을 하도록 연결해 두면 되는 것이다~~~

* 익스플로러와 네비게이트 사이에 약간의 차이가 있어 익스플로러 기준으로 !!!



■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트에 on을 붙여 준다)

blur
포커스를 다른곳으로 옮길 경우
click 링크나 폼의 구성원을 클릭할 때
change 선택값을 바꿀 경우
focus 포커스가 위치할 경우
mouseover 마우스가 올라올 경우
mouseout 마우스가 떠날 경우
mousedown 마우스를 누를 경우
mousemove 마우스를 움직일 경우
mouseup 마우스를 눌렀다 놓을 경우
select 입력양식의 하나가 선택될 때
submit 폼을 전송하는 경우
load 페이지,윈도우가 브라우져로 읽혀질 때
unload 현재의 브라우저,윈도우를 떠날 때
error 문서나 이미지에서 에러를 만났을 때
reset 리셋 버튼이 눌렸을 때
dbclick 더블클릭시
dragdrop 마우스 누르고 움직일 경우
keydown 키 입력시
keypress 키 누를 때
keyup 키를 누르고 놓았을 때
move 윈도우나 프레임을 움직일 때
resize 윈도우나 프레임 사이즈를 움직일 때



■ 메서드

blur()
입력 포커스를 다른 곳으로 이동시킴
click() 마우스 버튼이 눌러진 것처럼 해줌
focus() 입력 포커스를 준 것처럼 해줌
submit() 폼의 submit 버튼을 누른 것처럼 해줌
select() 메소드 폼의 특정 입력 필드를 선택함



■ 속성

event.keyCode 누른 키의 ASCII 정수 값
event.x
 문서 기준 누른 좌표의 left
event.y 문서 기준 누른 좌표의 top
event.clientX 문서 기준 누른 좌표의 left
event.clientY 문서 기준 누른 좌표의 top
event.screenX 콘테이너 기준 누른 좌표의 left
event.screenY 콘테이너 기준 누른 좌표의 top



■ 브라우저 객체별 이벤트 핸들러

선택 목록(SELECT)
onBlur, onChange, onFocus
문자 필드(TEXT) onBlur, onChange, onFocus, onSelect
문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
버튼(BUTTON) onClick
체크박스(CHECKBOX) onClick
라디오 버튼(RADID) onClick
링크 onClick, onMouseover
RESET 버튼(RESET) onClick
SUBMIT 버튼(BUTTON) onClick
DOCUMENT onLoad, onUnload
WINDOW onLoad, onUnload
폼(FORM) onSubmit
<script language="javascript">
function TEST(){
alert("페이지 로딩시 자동 호출!")
}
</script>

<body onLoad="TEST()">

<script language="javascript">
function TEST(){
alert("Click 했군요!")
}
</script>

<font onClick="TEST()"> Click! </ font>

<script language="javascript">
function TEST(){
alert("마우스를 올리지 마세욤!")
}
</script>

<font onMouseOver="TEST()"> MouseOver</ font>

<script language="javascript">
function TEST(){
alert("현재 좌표는 " + event.x + "/" + event.y)
}
</script>

<font onClick="TEST()"> Click 좌표 </ font>
* 브라우저 객체(window,document,form,image,layer,...)와 함께 사용되기 때문에 여기서는 간단하게 종류와 의미만 살펴보고!!!

출처: http://cafe.naver.com/q69.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=12560

'밥줄/JavaScript' Related Articles more
Comments