자바스크립트 이벤트 종류

(2017-09-04)

자바스크립트 이벤트 객체

1. 자바스크립트 이벤트 종류                                           ☞ jQuery 이벤트 참조

  ㅇ 마우스 이벤트 
     - click     : 마우스 버튼 클릭하고 버튼에서 손을 뗌
     - dblclick  : 마우스 버튼을 두 번 연속 더블 클릭 함
     - mousedown : 마우스 클릭의 앞 절반 (버튼을 누름)
     - mouseup   : 마우스 클릭의 뒤 절반 (버튼을 뗌)
        . 드래그 앤 드롭 이벤트 : 위 두 이벤트(mousedown, mouseup)로써 구현
     - mouseover : 마우스 포인터가 요소 위에 올라감
     - mouseout  : 마우스 포인터가 요소 밖으로 벗어남
     - mousemove : 마우스 포인터가 움직임
        . 마우스 커서가 해당 요소내를 움직일 때 또는 커서의 위치 확인에 유용함
     - 마우스 휠 이벤트 등

  ㅇ 키보드 이벤트 
     - keydown  : 키를 누르는 순간
     - keyup    : 키를 눌렀다 떼는 순간
     - keypress : 키 누름 (누르고있는 동안 계속 발생)

  ㅇ 폼 이벤트
     - submit : 전송 버튼을 누름 또는 텍스트 필등에서 엔터키를 누름
     - reset  : 폼을 초기화하기 위함
     - change : 폼 필드에서 변경이 일어남 (텍스트 변동,라디오 버튼의 클릭 등)
     - focus  : 웹브라우저가 특정 요소에 집중함 (해당 요소를 클릭,마우스 커서를 놓을때 등)
     - blur   : focus의 반대 ( 누름,필드 밖을 클릭하는 등)

  ㅇ 문서(document)/창(window) 이벤트
     - load   : 문서 및 추가 자원(이미지 등)들을 모두 불러왔을 때 발생
     - readystatechange
     - resize : 창의 최대화 버튼 또는 창의 크기를 조절
     - scroll : 스크롤바를 드래그하거나 또는 키보드(위/아래/home/end 등) 또는 마우스휠 사용
     - unload : 해당 페이지를 벗어남 (링크를 클릭, 브라우저 /창을 닫음 등)

  ㅇ 기타 이벤트
     - 텍스트 입력 이벤트, 시간 경과, 에러 발생 등


2. 이벤트 발생시 전달되는 이벤트 정보 : 이벤트 객체

  ㅇ `이벤트 객체` 이란?
     - 특정 이벤트와 연관된 객체로써, 해당 이벤트에 대한 상세한 정보를 담고 있음
       . 이벤트 핸들러에 전달되는 이벤트 정보를 담고 있음 
          .. 例) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 Ctrl,Alt,Shift 등의 키) 

  ㅇ 이벤트 객체의 `속성`
     - screenX  : 마우스 커서가 모니터 왼쪽 경계로부터 떨어진 픽셀 거리
     - screenY  : 마우스 커서가 모니터 위쪽 경계로부터 떨어진 픽셀 거리
     - pageX    : 마우스 커서가 창 왼쪽 경계로부터 떨어진 픽셀 거리
     - pageY    : 마우스 커서가 창 위족 경계로부터 떨어진 픽셀 거리
     - offsetX  : 마우스 커서가 요소 영역 상의 X 좌표
     - offsetY  : 마우스 커서가 요소 영역 상의 Y 좌표
     - altKey   : Alt 키 눌려진 여부 (true : 눌려짐, false : 안 눌려짐)
     - ctrlKey  : Ctrl 키 눌려진 여부 
     - shiftKey : 시프트 키 눌려진 여부
     - which    : keypress 이벤트에서 눌려진 키 코드(수치값)
     - target   : 이벤트 타깃이 되는 객체를 가리킴
        . 例) event.target.id : 이벤트 발생된 해당 객체의 id 값을 나타냄

  ㅇ 이벤트 객체의 `메소드`
     - preventDefault()  : 이벤트에 대한 웹브라우저의 기본동작 취소하기
        . 예로써, 링크 클릭시 기본동작인 새 웹페이지 불러오기를 취소 함
        . 이와 동일한 구현 방법은 , 이벤트 함수에서 false를 반환하면 됨
     - stopPropagation() : 이벤트 버블링의 정지
     - stopimmediatePropagation() : 이벤트 버블링의 정지
        . 같은 요소의 다른 이벤트 리스너 실행까지도 멈춤

  ※ [유의할점] 
     - 웹브라우저 마다 다소 다르게 구현되므로 유의해야 함  ☞ jQuery 이벤트 참조


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류
  1.   기술공통
  2.   기초과학
  3.   파동/광학/음향
  4.   방송/멀티미디어/정보이론
  5.   전자/전기/제어
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
      1.   프로그래밍 언어론
      2.   객체지향
      3.   자료구조
      4.   알고리즘
      5.   자료표현(알파벳/코드)
      6.   시스템 프로그래밍
      7.   프로그래밍언어 종류
            1. 프로그래밍 언어
            2. 기계어,어셈블리언어
        1.   C/C++
        2.   자바(Java)
        3.   자바스크립트
              1. JavaScript
              2. JS 객체
              3. JS 변수,타입
              4. JS 함수
              5. JS 배열
              6. JS 연산자
          1.   JS 이벤트
            1.   1. JS 이벤트
                2. JS 이벤트 종류
          2.   JS 활용
          3.   jQuery
        4.   PHP
        5.   (기타 언어)
      8.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   기계/재료/공업일반
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     참고문헌