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

예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 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

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
개체가 로드되는 동안 발생하는 이벤트
onerrorupdate
데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할  데이터 영역 개체에서 발생 
onfilterchange
비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을  발생
onfinish
마퀴개체의 loop 완료되었을  발생
onfocus
개체가 포커스를 받았을  발생
onfocusin
개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생
onfocusout
포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생
onhelp
브라우저가 활성화 되어 있는 동안 F1키를 눌렀을  
onkeydown
사용자가 키를 눌렀을  
onkeypress
기능키를 제외한 키를 눌렀을  발생
onkeyup
사용자가 키를 놓았을  발생
onlayoutcomplete
소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때 현재 LayoutRect개체를 모두 채우는 것이 끝났을  발생
onload
브라우저가 개체를 로드한 후에 발생
onlosecapture
개체가 마우스 캡쳐를 잃었을  발생
onmousedown
개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든)
onmouseenter
개체 안으로 마우스 포인터가 들어올 때 발생
onmouseleave
개체의 경계 밖으로 마우스 포인터가 이동할  발생
onmousemove
개체 위에서 마우스가 움직일 때 발생
onmouseout
개체 밖으로 마우스 포인터가 빠져나갈  발생
onmouseover
개체위로 마우스 포인터가 들어올 때 발생
onmouseup
마우스가 개체 위에 있는 동안 마우스를 누른상태에서 해제될때 발생
onmousewheel
마우스 휠이 돌아갈 때 발생
onmove
개체가 움직일  발생
onmoveend
개체가 움직임이 끝날  발생
onmovestart
개체가 움직이기 시작할  발생
onpaste
문서에 클립보드로 부터 데이터가 전송될때 타겟 개체에서 발생
onpropertychange
개체의 속성이 바뀔 때 발생
onreadystatechange
개체의 상태가 변화할 때 발생
onreset
폼을 사용자가 리셋할 경우 발생
onresize
개체의 크기가 바뀔 때 발생
onresizeend
제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생
onresizestart
제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생
onrowenter
데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생
onrowexit
데이터 소스 콘트르롤이 개체내의 현재 열을  변화시킬  발생 
onrowsdelete
레코드셋에서 열이 삭제될 때 발생
onrowsinserted
현재 레코드셋에 새로운 열이 추가된 후에 발생(데이터 개체에서)
onscroll
사용자가 개체내이 스크롤 바를 스크롤 할 때 발생
onselect
현재 선택된 영역이 바뀔 때 발생
onselectionchange
문서의 선택 영역의 상태가 바뀔 때 발생
onselectstart
개체가 선택되기 시작할 때 발생
onstart
마퀴 개체에서  루프가 시작될 때 발생
onstop
사용자가 stop버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생
onsubmit
폼이 전송되기 바로 전에 발생
onunload
 
 

원본링크 : http://blog.naver.com/nsy323?Redirect=Log&logNo=120062431530

'공부방 > HTML' 카테고리의 다른 글

[HTML] input  (0) 2009.09.04
[HTML] TEXTAREA 속성  (0) 2009.09.04
[HTML] DIV 속성, CSS  (0) 2009.08.26
[HTML] 그림의 링크 테두리 없애기  (2) 2009.08.25
[HTML] A 태그 링크 밑줄 없애기.  (0) 2009.08.25

+ Recent posts