J-Query_이벤트

이벤트

• 방문자가 웹사이트에 방문하여 취하는 동작을 이벤트라고 합니다.
• 단독이벤트 메서드: 제이쿼리 이벤트 메서드는 하나의 이벤트만 등록
• 그룹이벤트 등록 메서드: 2개 이상의 이벤트를 등록
• 단독이벤트 등록 메서드는 로딩, 마우스, 포커스, 키보드, 기타 이벤트로 나눌 수 있습니다.

이벤트종류

• 로딩이벤트

  load()
  택한 이미지나 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트 발생
  ready()
  지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트 발생
  error()
  이벤트 대상 요소에서 오류가 발생하면 이벤트 발생

• 마우스이벤트

  click()
  선택한 요소를 클릭했을 때 이벤트 발생
  dbclick()
  선택한 요소를 연속 두 번 클릭했을 때 이벤트 발생
  mouseout()
  선택한 요소의 영역에 마우스 포인터가 벗어났을 때 이벤트 발생
  mouseover()
  선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생
  hover()
  선택한 요소에 마우스 포인터를 올렸을 때, 벗어났을 때 각각 이벤트 발생
  mousedown()
  선택한 요소에 마우스 버튼을 눌렀을 때 이벤트 발생
  mouseup()
  선택한 요소에 마우스 버튼을 눌렀다 뗐을 때 이벤트 발생
  mouseenter()
  선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생
  mouseleave()
  선택한 요소의 영역에 마우스 포인터가 벗어났을 때 이벤트 발생
  mousemove()
  선택한 요소의 영역에서 마우스 포인터를 움직였을 때 이벤트 발생
  scroll()
  가로, 세로 스크롤바를 움직일 때마다 이벤트 발생

• 포커스 이벤트

  focus()
  선택한 요소에 포커스가 생성될 때 이벤트 발생 or
  선택한 요소에 강제로 포커스 생성
  focusin()
  선택한 요소에 포커스가 생성되었을 때 이벤트 발생
  focusout()
  포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생
  blur()
  포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생 or
  선택한 요소의 포커스가 강제로 사라지게 함
  change()
  -이벤트 대상인 입력 요소의 값이 변경되고 포커스가 이동하면 이벤트 발생
  -강제로 change 이벤트를 발생시킬 때도 사용

• 키보드 이벤트

  keypress()
  선택한 요소에서 키보드를 눌렀을 때 이벤트 발생
  문자 키를 제외한 키의 코드값 반환
  keydown()
  선택한 요소에서 키보드를 눌렀을 때 이벤트 발생
  키보드의 모든 키의 코드값 반환
  keyup()
  선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생

• 이벤트 등록 방식
  지정한 요소에 이벤트를 등록하려면 한 가지 동작에 대한 이벤트 등록은 단독이벤트 등록 방식, 두 가지 이상의 동작에 대한 이벤트 등록은 그룹이벤트 등록 방식이 있습니다. 그룹 이벤트 등록 메서드는 on() 메서드를 사용하여 이벤트를 등록합니다.

1 단독 이벤트 등록 메서드

$("이벤트대상").이벤트 등록 메서드(function(){
	code; 
}); 

// example 
$(".btn1").click(function(){ 
	alert(); 
});

2 그룹 이벤트 등록 메서드

// on() 메서드 등록 방식 1 
$("이벤트 대상 선택").on("이벤트종류1 이벤트종류2 ... 이벤트종류n", function(){ 
		자바스크립트 코드; 
	} 
});

// on() 메서드 등록 방식 2 
$("이벤트 대상 선택").on({ 
"이벤트종류1 이벤트종류2 ... 이벤트종류n" : function(){ 
자바스크립트 코드; 
	} 
});

// on() 메서드 등록 방식 3 
$("이벤트 대상 선택").on({ 
"이벤트종류1" :function(){ 자바스크립트 코드;1 }, 
"이벤트종류2" :function(){ 자바스크립트 코드;2 }, 
... 
"이벤트종류n" :function(){ 자바스크립트 코드;n }; 
});

3 강제로 이벤트 발생하기

$("이벤트 대상").단독 이벤트 등록 메서드(); 
$("이벤트 대상").trigger("이벤트 종류");

4 이벤트 제거 메서드

$("이벤트 대상").off("제거할 이벤트 종류"); 
// 예 
$(".btn1").off("click");

5 로딩 이벤트 메서드

$(document).ready(function(){ code; }); $(document).on("ready", function(){ code; }); $(window).load(function(){ code; }); $(window).on("load", function(){ code; });

이벤트 객체와 종류

$("이벤트 대상 선택").mousemove(function(매개변수){ 
	매개변수(이벤트 객체).속성; 
});

• 마우스 이벤트

  clientX
  마우스 포인터의 X 좌표값 반환(스크롤 이동거리 무시)
  clientY
  마우스 포인터의 Y 좌표값 반환(스크롤 이동거리 무시)
  pageX pageY
  스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌표값 반환
  screenX screenY
  화면 모니터를 기준으로 마우스 포인터의 Y 좌표값 반환
  layerX
  position을 적용한 요소를 기준으로 마우스 포인터의 X 좌표값 반환
  layerY
  position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌표값 반환
  button
  마우스 버튼의 종류에 따라 값 반환(왼쪽:0, 휠:1, 오른쪽:2)

• 키보드 이벤트

  keyCode
  키보드의 아스키코드값 반환
  altKey
  이벤트 발생 시 Alt 키가 눌렸으면 true, or false 반환
  ctrlKey
  이벤트 발생 시 Ctrl 키가 눌렸으면 true, or false 반환
  shiftKey
  이벤트 발생 시 Shift키가 눌렸으면 true, or false 반환

• 전체 이벤트

  target()
  이벤트가 전파된 마지막 요소를 가르킴
  cancelBubble()
  이벤트 전파를 차단하는 속성으로 기본값 false
  true로 설정하면 이벤트 전파가 차단
  stopPropagation()
  이벤트 전파 차단
  preventDefault()
  기본 이벤트 차단 (앞에 나온 내용)

이벤트가 발생한 요소 추적하기

• $(this) 선택자 : 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있습니다.

• index() 인덱스 반환 메서드 : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환합니다.

이벤트 제거 메서드

• off(): on() 메서드로 등록한 이벤트 제거
• unbind(): bind() 메서드로 등록한 이벤트 제거
• undelegate(): delegate() 메서드로 등록한 이벤트 제거