[JQuery] 이벤트와 이벤트 객체

01. 이벤트

 - 이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트

  를 많이 준비해 놓고 있습니다.

 - 예를 들어 사용자가 마우스를 클릭합니다. 그러면 사용자가 클릭했다는 것을 알려줍니다. 클릭했을때 어떤 동작을 

  하기 위해서 click 이벤트가 준비되어 있습니다.

 - 이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내고 그 다음 작업을 할 수 있을 것입니다. 이것이 일

  종의 이벤트입니다. 

 

 

 

02. 이벤트 핸들러

 - 이벤트와 우리가 준비한 프로그램을 연결해 주는 역할을 합니다.

 - 우리가 해야할 일은 이벤트가 일어났을 때 수행할 작업을 준비하고 이벤트 핸들러에게 그 일을 하도록 연결해 주면

  됩니다.

 

 

 

03. 이벤트 핸들러에 연결하는 방법

 1) 태그에 직접 지정

   <태그명 ... on이벤트명(이벤트 종류) = "이벤트핸들러">내용</태그명>

 

이벤트 핸드러 자리에 자바스크립트 언어 사용.

이벤트 내용이 많을때 다음과 같이 함수를 만들어서 이벤트 핸들러에서 호출.

 

 

 

 2) script태그 안에서 지정

객체명.on이벤트명 = 함수명;

객체명.on이벤트명 = function(){처리할내용...}

 

 

 

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

  blur 포커스를 다른곳으로 옮길 경우

  click 링크나 폼의 구성원을 클릭할 때

  change 선택값을 바꿀 경우

  focus 포커스가 위치할 경우

  mouseover 마우스가 올라올 경우

  mouseout 마우스가 떠날 경우

  mousedown 마우스를 누를 경우

  mousemove 마우스를 움직일 경우

  mouseup 마우스를 눌렀다 놓을 경우

  select 입력양식의 하나가 선택될 때

  submit 폼을 전송하는 경우

  load 페이지, 윈도우가 브라우저로 읽혀질때

  unload 현재의 브라우저, 윈도우를 떠날때

  error 문서나 이미지에서 에러를 만났을 때

  reset 리셋 버튼이 눌렸을때

  dbclick 더블클릭시

  dragdrop 마우스 누르고 움직일 경우

  keydown 키 입력시

  keypress 키 누를 때

  keyup 키를 누르고 놓았을 때

  move 윈도우나 프레임을 움직일 때

  resize 윈도우나 프레임 사이즈를 움직일 때 

 

 

 

05. 메서드

  blur() 입력 포커스를 다른 곳으로 이동시킴

  click() 마우스 버튼이 눌러진 것처럼 해줌

  focus() 입력 포커스를 준 것처럼 해줌

  submit() 폼의 submit 버튼을 누른 것처럼 해줌

  select() 메소드 폼의 특정 입력 필드를 선택함

 

 

 

06. 속성

  event.KeyCode 누른 키의 ASCII 정수 값

  event.x 문서 기준 누른 좌표의 left, right

  event.y 문서 기준 누른 좌표의 top, bottom

  event.clientX 문서 기준 누른 좌표의 left, right

  event.clientY 문서 기준 누른 좌표의 top, bottom

  event.screenX 콘테이너 기준 누른 좌표의 left, right

  event.screenY 콘테이너 기준 누른 좌표의 top, bottom

 

 

 

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

  선택목록(SELECT) : onBlur, onChange, onFocus

  문자필드(TEXT) : onBlur, onChange, onFocus, onSelect

  문자영역(TEXTAREA) : onBlur, onChange, onFocus, onSelect

  버튼(BUTTON) : onClick

  체크박스(CHECKBOX) : onClick

  라디오 버튼(RADIO) : onClick

  링크 : onClick, onMouseover

  RESET 버튼(RESET) onClick

  DOCUMENT : onLoad, onUnload

  WINDOW : onLoad, onUnload 

  폼(FORM) : onSubmit 

 

 

 

 

Reference 

https://cofs.tistory.com/190