자바스크립트 이벤트 종류

(2017-08-15)

자바스크립트 이벤트 객체

정보기술(IT) 1. 정보기술

전산기초
컴퓨터구조
프로그래밍
데이터베이스
소프트웨어 공학
운영체제
정보보호/보안
IT 기타기술
 > 프로그래밍프로그래밍 언어론
객체지향
자료구조
알고리즘
자료표현(알파벳/코드)
시스템 프로그래밍
프로그래밍언어 종류
프로그래밍 기타일반
 > 프로그래밍언어 종류 1. 프로그래밍 언어
2. 기계어,어셈블리언어

C/C++
자바(Java)
자바스크립트
PHP
 > 자바스크립트 1. JavaScript
2. JS 객체
3. JS 변수,타입
4. JS 함수
5. JS 배열

JS 이벤트
JS 활용
jQuery
 > JS 이벤트 1. JS 이벤트
2. JS 이벤트 종류

     
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 이벤트 종류  

 
        최근수정     모바일웹     참고문헌