JQuery_제이쿼리 이벤트

<이벤트 등록 메서드란?>

: 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고,

이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다.

 

ex)

<button id="btn">버튼</button>

$("#btn").click(function(){

 자바스크립트 코드;

});

 

=> $("#btn") →이벤트 대상

click() → 이벤트 등록 메서드

function(){...} → 이벤트 핸들러

구분	종류	설명
로딩 이벤트	load()	선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다.
	ready()	지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생한다.
	error()	이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다.
마우스 이벤트	click()	선택한 요소를 클릭했을 때 이벤트가 발생한다.
	dbclick()	선택한 요소를 연속해서 두 번 클릭했을 때 이벤트가 발생한다.
	mouseout()	선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다. 이때 하위 요소의 영향을 받는다.
	mouseover()	선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생된다.
	hover()	선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생한다.
	mousedown()	선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
	mouseup()	선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생한다.
	mouseenter()	선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생한다.
	mouseleave()	선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다.
	mousemove()	선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생한다.
	scroll()	가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생한다.
포커스 이벤트	focus()	선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스를 생성한다.
	focusin()	선택한 요소에 포커스가 생성되었을 때 이벤트가 발생한다.
	focusout()	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생한다.
	blur()	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다.
	change()	이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 강제로 change이벤트를 발생시킬 때도 사용한다.
키보드 이벤트	keypress()	선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 그리고 문자 키를 제외한 키의 코드값을 반환한다.
	keydown()	선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.  키보드의 모든 키의 코드값을 반환한다.
	keyup()	선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생한다.

 

<이벤트 등록 방식>

: 지정한 요소에 이벤트를 등록하는 방법은 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식이 있다.

한 가지 동작에 대한 이벤트 등록 방식에는 단독 이벤트 등록 메서드나 그룹 이벤트 등록 메서드를 사용하고,

두 가지 이상의 동작에 대한 이벤트 등록 방식에는 그룹 이벤트 등록 메서드를 사용한다.

 

-단독 이벤트 등록 메서드

ex)

<button id="btn1">버튼</button>

$(".btn1").click(function(){

 alert("welcome");

});

 

-그룹 이벤트 등록 메서드

ex)

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}

});

 

<강제로 이벤트 발생시키기>

: 사용자에 의해 이벤트가 발생한 게 아니라 핸들러에 의해 자동으로 이벤트가 발생됨을 의미한다.

단독 이벤트 등록 메서드와 trigger()메서드를 사용해 강제로 이벤트를 발생시킬 수 있다.

ex) 

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

$("이벤트 대상").trigger("이벤트 종류");

 

<이벤트 제거 메서드>

: 이벤트를 제거하는 메서드로 off()가 있다.

ex)

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

 

<<a>,<form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기>

ex)

①return false를 이용한 차단 방식

$("a 또는 form").이벤트 메서드(function() {

 자바스크립트 코드;

 return false;

});

 

②preventDefault() 메서드를 이용한 차단 방식

$("a 또는 form").이벤트 메서드(function(e) {

 e.preventDefault(); //prevent는 막다를, Default는 기본 이벤트를 의미한다.

 자바스크립트 코드;

});

 

<이벤트 객체와 종류>

: 사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며,

이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.

ex)

$("이벤트 대상 선택").mousemove(function(매개변수) {

 매개변수(이벤트 객체).속성;

});

 

-이벤트 객체의 속성 종류

구분	종류	설명
마우스 이벤트	clientX	마우스 포인터 X좌푯값 반환(스크롤 이동 거리 무시)
	clientY	마우스 포인터 Y좌푯값 반환(스크롤 이동 거리 무시)
	pageX	스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X좌표값을 반환
	pageY	스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y좌표값을 반환
	screenX	화면 모니터를 기준으로 마우스 포인터의 X좌표값을 반환
	screenY	화면 모니터를 기준으로 마우스 포인터의 Y좌표값을 반환
	layerX	position을 적용한 요소를 기준으로 마우스 포인터의 X좌표값을 반환
	layerY	position을 적용한 요소를 기준으로 마우스 포인터의 Y좌표값을 반환
	button	마우스 버튼의 종류에 따라 값을 반환 (왼쪽: 0, 휠: 1, 오른쪽: 2)
키보드 이벤트	keyCode	키보드 아스키 코드값을 반환
	altKey	이벤트 발생 시 Alt키가 눌렸으면 true를, 아니면 false를 반환
	ctrlKey	이벤트 발생 시 Ctrl키가 눌렸으면 true를, 아니면 false를 반환
	shiftKey	이벤트 발생 시 Shift키가 눌렸으면 true를, 아니면 false를 반환
전체 이벤트	target	이벤트가 전파된 마지막 요소를 가리킨다.
	cancelBubble	이벤트의 전파를 차단하는 속성으로, 기본값은 false며, true로 설정하면 전파가 차단된다.
	stopPropagation()	이벤트의 전파를 차단한다.
	preventDefault()	기본 이벤트를 차단한다. 예를 들어 <a>에 클릭 이벤트를 적용하고 사용자가 이런 이벤트를 발생시키면 기본 이벤트가 등록되어 있어 링크 주소로 이동하는데, 이런 기본 이벤트를 차단할 수 있다.

 

<그룹 이벤트 등록 및 삭제하기>

-그룹 이벤트 등록 메서드 종류

종류	설명
on()	이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
bind()	이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.
delegate()	선택한 요소의 하위 요소에 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
one()	이벤트 대상 요소에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1회 발생하고 자동으로 해제된다.

-이벤트 제거 메서드의 종류

종류	설명
off()	on() 메서드로 등록한 이벤트를 제거한다.
unbind()	bind() 메서드로 등록한 이벤트를 제거한다.
undelegate()	delegate() 메서드로 등록한 이벤트를 제거한다.