제이쿼리 학습 정리-2

# 제이쿼리 학습 정리

# 객체 조작 메서드

• 객체를 생성, 복제, 삭제, 속성 변환하는 메서드
• 속성 조작 메서드 : 요소의 속성을 바꿀 때 사용한다.

1. html()  / html("새 요소")
- 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나, 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다.
- 예)
$("요소 선택").html()	// 선택한 요소의 하위 요소를 가져온다.
$("요소 선택").html("새 요소")	// 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다.

2. text() / text("새 ㅌ텍스트")
- 선택한 요소에 포함되어 있는  전체 텍스트를 가져오거나, 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용한다.
- 예)
$("요소 선택").text()	// 선택한 요소가 감싸는 모든 텍스트를 가져온다.
$("요소 선택").text("새 텍스트")	// 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다.

3. attr("속성명")  / attr("속성명", "새 값")
- 선택한 요소에 새 속성을 생성하거나 기존 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용한다.
- 예)
$("요소 선택").attr("속성명")	// 선택한 요소의 지정한 속성값을 가져온다.
$("요소 선택").attr("속성명", "새 값")	// 요소를 선택하여 지정한 속성에 새 값을 적용한다.

4. removeAttr("속성명")
- 선택한 요소에서 기존 속성을 삭제할 때 사용한다.
- 예)
$("요소 선택").removeAttr("속성명")	// 선택한 요소의 지정한 속성만 제거한다.

5. prop("상태 속성명")  / prop("상태 속성명", "새 값")
- 선택한 폼 요소의 상태 속성값을 가져오거나, 새롭게 설정할 때 사용한다.
  그리고 선택한 요소의 태그명, 노드 타입, 선택 상자의 선택된 옵션의 인덱스 값도 알 수 있다.
- 예)
$("요소 선택").prop("상태 속성명")	// 선택한 요소의 상태 속성값을 가져온다.
$("요소 선택").prop("상태 속성명", "새 값")	// 요소를 선택하여 상태 속성에 새 값을 적용한다.

6. val()  / val("새 값")
- 선택한 폼 요소의 value 속성값을 가져오거나, 새 값을 적용할 때 사용한다.
- 예)
$("요소 선택").val()	// 선택한 폼 요소의 value 값을 가져온다.
$("요소 선택").val("새 값")	// 폼 요소를 선택하여 value 속성에 새 값을 적용한다.

7. css("속성명")  / css("속성명", "새 값")
- 예)
$("요소 선텍").css("속성명")	// 선텍한 요소의 지정한 스타일(CSS) 속성값을 가져온다.
$("요소 선텍").css("속성명", "새 값")	// 요소를 선택하여 지정한 스타일(CSS) 속성에 새 값을 적용한다.

8. addClass("class 값")
- 선택한 요소에 클래스를 생성한다.
- 예)
$("요소 선택").addClass("class 값")	// 선택한 요소의 clss 속성에 새 값을 추가한다.

9. removeClass("clss 값")
- 선택한 요소에서 지정한 클래스를 삭제한다.
- 예)
$("요소 선택").removeClass("class 값")	// 선택한 요소의 class 속성에서 지정한 값만 제거한다.

10. toggleClass("class 값")
- 선택한 요소에 지정한 클래스가 없으면 생성, 있으면 삭제한다.
- 예)
$("요소 선택").toggleClass("class 값")	// 선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가한다.

11. hasClass("hasClass")
- 선택한 요소에 지정한 클래스가 있으면 true, 없으면 false를 반환한다.
- 예)
$("요소 선택").hasClass("class 값")	// 선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false를 반환한다.

• 수치 조작 메서드 : 요소의 너빗값 또는 높잇값 등 수치를 바꿀 떄 사용한다.

1. height()
- 여백 및 선 두께를 제외한 순수 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").height()  / $("요소 선택").height(100)	
// 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환한다.

2. width()
- 여백 및 선 두께를 제외한 순수 요소의 너빗값을 계산한다.
- 예)
$("요소 선택").width()  / $("요소 선택").width(100)	
// 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환한다.

3. innerHeight()
- 여백을 포함한 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").innerHeight()  / $("요소 선택").innerHeight(300)	
// 안쪽 여백을 포함한 높잇값을 반환하거나 변환한다.

4. InnerWidth()
- 여백을 포함한 요소의 너빗값을 계산한다.
$("요소 선택").innerWidth()  / $("요소 선택").innerWidth(100)	
// 안쪽 여백을 포함한 너빗값을 반환하거나 변환한다.

5. outerHeight()
- 여백 및 선을 포함한 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").outerHeight()  / $("요소 선택").outerHeight(100)
// 선과 안쪽 여백을 포함한 높잇값을 변환한다.

6. outerWidth()
- 여백 및 선을 포함한 요소의 너빗값을 계산한다.
- 예)
$("요소 선택").outerWidth()  / $("요소 선택").outerWidth(100)
// 선과 안쪽 여백을 포함한 너빗값을 변환한다.

7. position()
- 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
- 예)
$("요소 선택").position().left  / $("요소 선택").position().top
// 선택한 요소의 포지션의 위칫값을 반환한다.

8. offset()
- 문서를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
- 예)
$("요소 선택").offset().left  / $("요소 선택").offset().top
// 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환한다.

9. scrollLeft()
- 브라우저의 스크롤바가 수평으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
- 예)
$(window).scrollLeft()
// 브라우저의 수평 스크롤 이동 높잇값을 반환한다.

10. scrollTop()
- 브라우저의 스크롤바가 수직으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
- 예)
$(window).scrollTop()
// 브라우저의 수직 스크롤 이동 너빗값을 반환한다.

• 객체 편집 메서드 : 객체를 생성, 삭제, 복제할 때 사용한다.

1. before()
- 예)
$("요소 선택").before("새 요소")
// 선택한 요소의 이전 위치에 새 요소를 추가한다.

2. after()
- 예)
$("요소 선택").after("새 요소")
// 선택한 요소의 다음 위치에 새 요소를 추가한다.

3. append()
- 예)
$("요소 선택").append("새 요소")
// 선택한 요소의 마지막 위치에 새 요소를 추가한다.

4. appendTo()
- 예)
$("새 요소).appendTo("요소 선택")
// 선택한 요소의 마지막 위치에 새 요소를 추가한다.

5. prepend()
- 예)
$("요소 선택").prepend("새 요소")
// 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.

6. prependTo()
- 예)
$("새 요소").prependTo("요소 선택")
// 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.

7. insertBefore()
- 예)
$("새 요소").insertBefore("요소 선택")
// 선택한 요소의 이전 위치에 새 요소를 추가한다.

8. insertAfter()
- 예)
$("새 요소").insertAfter("요소 선택")
// 선택한 요소의 다음 위치에 새 요소를 추가한다.

9. clone()
- 예)
$("요소 선택").clone("true or false")
// 선택한 문서 객체를 복제한다. 이때 인자값이 true 일 경우 하위 요소까지 모두 복제, false일 경우 선택한 요소만 복제한다.

10. empty()
- 예)
$("요소 선택").empty()
// 선택한 요소의 하위 내용들을 모두 삭제한다.

11. remove()
- 예)
$("요소 선택").remove()
// 선택한 요소를 삭제한다.

12. replaceAll()
- 예)
$("새 요소").replaceAll("요소 선택")  / $("요소 선택").replaceAll("새 요소")
// 선택한 요소들을 새 요소로 교체한다.

13. unwrap()
- 예)
$("요소 선택").unwrap()
// 선택한 요소의 부모 요소를 삭제한다.

14. wrap()
- 예)
$("요소 선택").wrap(새 요소)
// 선택한 요소를 새 요소로 각각 감싼다.

15. wrapAll()
- 예)
$("요소 선택").wrapAll()
// 선택한 요소를 새 요소로 한꺼번에 감싼다.

16. wrapInner()
- 예)
$("요소 선택").wrapInner(새 요소)
// 선택한 요소의 내용을 새 요소로 각각 감싼다.

 

# 제이쿼리 이벤트

• 이벤트 : 웹 사이트 방문자의 모든 동작을 의미
• 이벤트 핸들러 : 이벤트가 발생했을 때 코드를 실행시키는 것

 

# 이벤트 등록 메서드

• 기본형 : 이벤트 대상 $("#btn") / click() : 이벤트 등록 메서드 / function() { ... } : 이벤트 핸들러

<button id="btn">버튼</button>
$("#btn").click(function() {
	자바스크립트 코드;
});

## 로딩 이벤트

1. load()
- 선택한 이미지 도는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다.

2. ready()
- 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생한다.

3. error()
- 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다.

## 마우스 이벤트

1. click()
- 선택한 요소를 클릭했을 때 이벤트가 발생한다.

2. dblclick
- 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트가 발생한다.

3. mouseout()
- 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생, 이때 하위 요소의 영향을 받는다,

4. mouseover()
- 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생한다.

5. hover()
- 선택한 요소에 마우스 포인터를 올렸을 떄와 벗어났을 때 각각 이벤트가 발생한다.

6. mousedown()
- 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.

7. mouseup()
- 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생한다.

8. mouseenter()
- 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생한다.

9. mouseleave()
- 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다.

10. mousenove()
- 선택한 요소 범위에서 마우스 포인터를 움직였을 떄 이벤트가 발생한다.

11. scroll()
- 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생한다.

## 포커스 이벤트

1. focus()
- 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나, 선택한 요소에 강제로 포커스를 생성한다.

2. focusin()
- 선택한 요소에 포커스가 생성되었을 때 이벤트가 발생한다.

3. focusout()
- 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생한다.

4. blur()
- 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다.

5. change()
- 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 강제로 change 이벤트를 발생시킬 때도 사용한다.

## 키보드 이벤트

1. kerpress()
- 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.
  그리고 문자 키를 제외한 키의 코드값을 반환한다.
  
2. keydown()
- 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.
  키보드의 모든 키의 코드값을 반환한다.
  
3. keyup()
- 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생한다.

## 단독 이벤트 등록 메서드

• 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다.
• 단독 이벤트 등록 메서드(기본형)

$("이벤트 대상 선택").이벤트 등록 메서드(function() {
	자바스크립트 코드;
});

• 단독 이벤트 등록 메서드 사용 예

// 사용자가 버튼 클릭 시 환영 메시지를 경고 창에 출력

<button class="btn_1">버튼</button>
$(".btn_1").click(function() {
	alert("환영합니다.");
});

 

## 그룹 이벤트 등록 메서드

• 한 가지 동작 이상의 이벤트를 등록할 수 있다.
• 그룹 이벤트 등록 메서드(기본형)

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


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


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

## 강제로 이벤트 발생시키기 

- '강제로 이벤트가 발생했다'는건 사용자에 의해 이벤트가 발생된게 아닌, 핸들러에 의해 자동으로 이벤트가 발생된 것을 의미한다.

- trigger() 메서드를 사용하면 강제로 이벤트를 발생시킬 수 있다.

## 이벤트 제거 메서드

• 이벤트를 제거하는 메서드에는 off()가 있다.
• 이벤트 제거 메서드(기본형)

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

## 로딩 이벤트 메서드

• 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행한다. 로딩 이벤트 메서드에는 ready()와 load()가 있다.
• 로딩 이벤트 메서드(기본형)

1.
$(document).ready(function() {자바스크립트 코드; });

2.
$(document).on("ready", function() {자바스크립트 코드; });

3.
$(window).load(function() {자바스크립트 코드; });

4.
$(window).on("load", function() {자바스크립트 코드; });

## 마우스 이벤트 메서드

• 사용자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말한다. 마우스 이벤트 메서드에는 click(), dblclick() 등이 있다.
• 마우스 이벤트 메서드(기본형)

1. click 이벤트 등록
$("이벤트 대상 선택").click(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("click", function() {자바스크립트 코드; });

2. click 이벤트 강제 발생
$("이벤트 대상 선택").click();

3. dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("dbclick", function() {자바스크립트 코드; });

4. dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();

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

기본형
1. return false를 이용한 차단
$("a 또는 form").이벤트 메서드(function() {
	자바스크립트 코드;
    return false;
});

2. preventDefault() 메서드를 이용한 차단
$("a 또는 form").이벤트 메서드(function(e) {
	e.preventDefault();
    자바스크립트 코드;
});

## mouseover() / mouseout() / hover() 이벤트 메서드

mouseover() 기본형
1. mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseover", function() {자바스크립트 코드; });

2. mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();


mouseout() 기본형
1. mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseout", function() {자바스크립트 코드; });

2. mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();


hover() 기본형
1. hover 이벤트 등록
$("이벤트 대상 선택").hover(
	function() {마우스 오버 시 실행될 코드},
    function() {마우스 아웃 시 실행될 코드}
);

## mouseenter() / mouseleave() 이벤트 메서드

mouseenter() 기본형
1. mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseenter", function() {자바스크립트 코드; });

2. mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();


mouseleave() 기본형 
1. mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseleave", function() {자바스크립트 코드; });

2. mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();

## mousemove() 이벤트 메서드

mousemove() 기본형
1. mousemove() 이벤트 등록
$("이벤트 대상 선택").mousemove(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mousemove", function() {자바스크립트 코드; });

2. mousemove() 이벤트 강제 발생
$("이벤트 대상 선택").mousemove();

 

# 이벤트 객체와 종류

• 사용자가 이벤트를 발생시킬 떄마다 이벤트  핸들러의 매개변수에는 이벤트 객체가 생성, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.
• 이벤트 객체 생성의 기본형

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

## 마우스 이벤트

1. clientX
- 마우스 포인터의 X 좌푯값 반환(스크롤 이동 거리 무시)

2. clientY
- 마우스 포인터의 Y 좌푯값 반환(스크롤 이동 거리 무시)

3. pageX
- 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌푯값을 반환

4. pageY
- 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌푯값을 반환

5. screenX
- 화면 모니터를 기준으로 마우스 포인터의 X 좌푯값을 반환

6. screenY
- 화면 모니터를 기준으로 마우스 포인터의 Y 좌푯값을 반환

7. layerX
- position을 적용한 요소를 기준으로 마우스 포인터의 X 좌푯값을 반환

8. layerY
- position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌푯값을 반환

9. button
- 마우스 버튼의 종류에 따라 값을 반환(왼쪽: 0 / 휠: 1 / 오른쪽: 2)

## 키보드 이벤트

1. keyCode
- 키보드의 아스키 코드값을 반환

2. altKey
- 이벤트 발생 시 Alt 키가 눌렸으면 true를, 아니면 false를 반환

3. ctrlKey
- 이벤트 발생 시 Ctrl 키가 눌렸으면 true를, 아니면 false를 반환

4. shiftKey
- 이벤트 발생 시 Shift 키가 눌렸으면 true를, 아니면 false를 반환

## 전체 이벤트

1. target
- 이벤트가 전파된 마지막 요소를 가리킨다.

2. cannelBubble
- 이벤트의 전파를 차단하는 속성으로, 기본값은 false이며, true로 설정함녀 전파가 차단된다.

3. stopPropagation()
- 이벤트의 전파를 차단한다.

4. preventDefault()
- 기본 이벤트를 차단한다.

## scroll() 이벤트 메서드

• 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용한다.

scroll() 이벤트의 기본형
1. scroll 이벤트 등록
$("이벤트 대상 선택").scroll(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("scroll", function() {자바스크립트 코드; });

2. scroll 이벤트 강제 발생
$("이벤트 대상 선택").scroll();

## 포커스 이벤트

• 포커스의 경우 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성된다.
• 키보드 접근성 : 사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 하는 것
• focus() 이벤트 메서드 : 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다.

focus 이벤트 메서드 기본형
1. focus 이벤트 등록
$("이벤트 대상 선택").focus(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focus", function() {자바스크립트 코드; });

2. focus 이벤트 강제 발생
$("이벤트 대상 선택").focus();

• blur() 이벤트 메서드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킨다.

blur 이벤트 메서드 기본형
1. blur 이벤트 등록
$("이벤트 대상 선택").blur(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("blur", function() {자바스크립트 코드; });

2. blur 이벤트 강제 발생
$("이벤트 대상 선택").blur();

• focusin() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킨다.

focusin 이벤트 메서드 기본형
1. focusin 이벤트 등록
$("이벤트 대상 선택").focusin(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focusin", function() {자바스크립트 코드; });

2. focusin 이벤트 강제 발생
$("이벤트 대상 선택").focusin();

• focusout() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생시킨다.

focusout 이벤트 메서드 기본형
1. focusout 이벤트 등록
$("이벤트 대상 선택").focusout(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focusout", function() {자바스크립트 코드; });

2. focusout 이벤트 강제 발생
$("이벤트 대상 선택").focusout();

## 키보드로 마우스 이벤트 대응하기

• 키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것이다.
• 마우스 이벤트에 대한 키보드 대응 이벤트

1. 마우스 이벤트 mouseover : 이보크 이벤트 focus

2. 마우스 이벤트 mouseout : 키보드 이벤트 blur

• 키보드 접근성을 배려한 이벤트 적용의 예

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>
$(".btn").on("mouseover focus", function() {
	$(".txt_1").hide();
});

## change() 메서드

• 선택한 폼 요소의 값(value)을 새 값으로 변경한다. 그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다.

change() 메서드의 기본형
1. change 이벤트 등록
$("이벤트 대상 선택").change(function() {"자바스크립트 코드; "});
$("이벤트 대상 선택").on(function() {"자바스크립트 코드; "});

2. change 이벤트 강제 발생
$("이벤트 대상 선택").change();

## keydown() 메서드

keydown() 이벤트 메서드 기본형
1. keydown 이벤트 등록
$("이벤트 대상 선택").keydown(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keydown", function() {자바스크립트 코드; });

2. keydown 이벤트 강제 발생
$("이벤트 대상 선택").keydown();

## keyup() 메서드

keyup() 이벤트 메서드 기본형
1. keyup 이벤트 등록
$("이벤트 대상 선택").keyup(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keyup", function() {자바스크립트 코드; });

2. keyup 이벤트 강제 발생
$("이벤트 대상 선택").keyup();

## keypress() 메서드

keypress() 이벤트 메서드 기본형
1. keypress 이벤트 등록
$("이벤트 대상 선택").keypress(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keypress", function() {자바스크립트 코드; });

2. keypress 이벤트 강제 발생
$("이벤트 대상 선택").keypress();

 

출처 : Do it! 자바스크립트+제이쿼리 입문책