Where The Streets Have No Name

javascript [필수] -(2) 이벤트 처리 본문

Developement/Web

javascript [필수] -(2) 이벤트 처리

highheat 2006. 4. 14. 15:02
  • 이벤트 정의와 사용
    • 이벤트 : 사용자가 웹페이지나 기타 다른 브라우저에 수행한 작업으로 인한 결과
    • 이벤트 처리 : 이벤트로 인해 수행되는 프로세스
    • 이벤트 핸들러 : 프로세스를 수행하는 코드
    • 사용 예 : 사용자가 링크 위로 마우스를 갖다 대면 다이얼로그 박스를 표시한다거나, 폼에 입력한 데이터를 검증한다거나, 버튼을 클릭할 때 애니메이션을 나타내거나, Java 애플릿과 브라우저 플러그인이 상호작용을 하도록 한다.

  • JavaScript가 정의한 이벤트
    HTML 태그 JavaScript 이벤트 설명
    다양 mouseMove 마우스 이동
    <A>..</A> Click 마우스로 링크를 클릭
    dbClick 마우스를 링크위에서 더블클릭
    mouseDown 마우스 버튼을 누름
    mouseUp 마우스 버튼을 놓음
    mouseOver 마우스를 링크위로 이동
    mouseOut 링크 위에 있던 마우스를 링크 밖으로 이동
    keyDown 사용자가 키를 누름
    keyUp 사용자가 키를 놓음
    keyPress 사용자가 키를 눌렀다가 놓음
    <IMG> abort 사용자 액션으로 인해 이미지 로딩 작업을 중단함
    error 이미지 로딩하는 동안 에러 발생
    load 이미지가 로드되고 화면에 나타남
    keyDown 사용자가 키를 누름
    keyUp 사용자가 키를 놓음
    keyPress 사용자가 키를 눌렀다가 놓음
    <AREA> mouseOver 마우스가 클라이언트측 이미지맵의 한 영역으로 이동함
    mouseOut 마우스가 이미지맵 영역 밖으로 이동
    dbClick 사용자가 이미지맵의 한 영역을 더블클릭함
    <BODY>..</BODY> Click 사용자가 문서의 본문을 클릭
    dbClick 문서의 본문을 더블 클릭함
    keyDown 키를 누름
    keyUp 키를 놓음
    keyPress 키를 눌렀다가 놓음
    mouseDown 마우스 버튼을 누름
    mouseUp 마우스 버튼을 놓음
    <BODY>..</BODY>
    <FRAMESET>..</FRAMESET>
    <FRAME>..</FRAME>    		blur 윈도우에서 현재 입력 포커스가 사라짐
    error 윈도우가 로드되는 동안 에러 발생
    focus 입력 포커스가 현재 윈도우로 이동
    load 윈도우 로딩이 완료됨
    unload 윈도우를 종료함
    move 윈도우가 이동됨
    resize 윈도우의 크기가 바뀜
    dragDrop 윈도우에 객체를 드롭
    <FORM>..</FORM> submit 사용자가 폼을 제출
    reset 사용자가 폼을 재설정
    <INPUT TYPE="text"> blur 현재 입력 포커스가 텍스트 필드에서 사라짐
    focus 현재 입력 포커스가 텍스트 필드로 이동
    change 텍스트 필드가 변경되어 현재 입력 포커스가 사라짐
    select 텍스트 필드에 있는 텍스트가 선택됨
    <INPUT TYPE="password"> blur 패스워드 필드에서 입력 포커스가 사라짐
    focus 패스워드 필드에 입력 포커스 생김
    <TEXTAREA>..</TEXTAREA> blur 텍스트 영역이 현재 입력 포커스가 사람짐
    focus 텍스트 영역에 입력 포커스 생김
    change 텍스트 영역이 변경되어 입력 포커스가 사라짐
    select 텍스트 영역에서 텍스트가 선택됨
    keyDown 키를 누름
    keyUp 키를 놓음
    keyPress 키를 눌렀다 놓음
    <INPUT TYPE="button"> Click 버튼이 클릭됨
    blur 입력할 수 없도록 버튼이 흐려짐
    focus 입력할 수 있도록 포커스 생김
    mouseDown 버튼 위에서 왼쪽 마우스 버튼 누름
    mouseUp 버튼 위에서 왼쪽 마우스 버튼 놓음
    <INPUT TYPE="submit"> Click 제출 버튼이 클릭됨
    blur 제출 버튼에서 입력 포커스가 사라짐
    focus 제출 버튼에 입력 포커스 생김
    <INPUT TYPE="reset"> Click 리셋 버튼이 클릭됨
    blur 리셋 버튼에서 포커스가 사라짐
    focus 리셋 버튼에서 포터스가 놓임
    <INPUT TYPE="radio"> Click 라디오 버튼이 클릭
    blur 라디오 버튼에서 입력 포커스가 사라짐
    focus 라디오 버튼에 입력 포커스 생김
    <INPUT TYPE="checkbox"> Click 체크 박스가 클릭
    blur 체크 박스에서 입력 포커스가 사라짐
    focus 체크 박스에 입력 포커스 놓임
    <INPUT TYPE="file"> blur 파일 업로드 폼 요소에서 입력 포커스 사라짐
    change 사용자가 업로드될 파일을 선택
    focus 파일 업로드 폼 요소에 입력 포커스 놓임
    <SELECT>..</SELECT> blur 선택 요소가 현재 입력 포커스 잃음
    change 선택 요소가 변경되어 입력 포커스가 사라짐
    focus 선택 요소에 현재 입력 포커스가 놓임

  • 이벤트 처리 속성
    이벤트핸들링속성실행되는 상황
    onAbort 이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음
    onBlur 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라짐
    onChange 텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐
    onClick 링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭됨
    onDbClick 링크나 클라이언트측 이미지맵 영역, 문서가 더블 클릭됨
    onDragDrop 드래그된 객체가 윈도우나 프레임에 드롭됨
    onError 이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생함
    onFocus 문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓임
    onKeyDown 키를 누름
    onKeyPress 키를 눌렀다 놓음
    onKeyUp 키를 놓음
    onLoad 이미지나 문서, 프레임이 로드됨
    onMouseDown 마우스 버튼 누름
    onMouseMove 마우스를 이동함
    onMouseOut 링크나 클라이언트측 이미지맵에서 마우스를 옮김
    onMouseOver 마우스를 링크나 클라이언트측 이미지맵으로 옮김
    onMouseUp 마우스 버튼을 놓음
    onMove 사용자가 윈도우나 프레임을 이동함
    onReset 폼의 리셋 버튼을 클릭하여 폼을 리셋시킴
    onResize 사용자가 윈도우나 프레임의 크기를 조절
    onSelect 텍스트는 텍스트 필드나 영역에서 선택됨
    onSubmit 폼이 제출됨
    onUnload 사용자가 문서나 프레임 세트를 종료함
    • 'Developement/Web' Related Articles more