JQuery 기본 문법과 구성요소(폼이벤트)

폼 이벤트(Form Event)

 

폼(form)내부의 요소에 대해 JQuery로 바인딩하여 사용

폼으로 전달되는 데이터를 처리하는 데에 활용된다.

 

submit()

form을 submit할 때 발생

함수를 파라미터로 받으며 submit될 때 호출

반환 값은 없다.

 

사용 형식:

$(selector).submit(function)

 

예제 코드)

 

실행결과

 

 

change()

form의 값이 변할 때마다 발생

함수를 파라미터로 받으며 선택된 요소의 값이 변경될 때 호출

폼 요소 내부의 값이 변할 때 호출되는 함수를 바인딩한다.

(<input>, <textarea>, <select> 요소에서만 동작)

반환 값은 없다.

 

사용 형식:

$(selector).change(function)

 

예제 코드)

 

실행결과

 

 

blur()

form의 요소가 포커스를 잃거나 폼의 다음 요소로 이동 시 발생

함수를 파라미터로 받으며 요소가 포커스를 잃을 때 호출

반환 값은 없다.

 

사용 형식:

$(selector).blur(function)

 

예제 코드)

 

실행결과

 

 

focus()

form의 요소가 포커스를 획득하면 발생

함수를 파라미터로 받으며 요소가 포커스를 가지면 호출

반환 값은 없다.

 

사용 형식:

$(selector).focus(function)

 

예제 코드)

 

실행결과

 

 

focusin()

form의 요소가 포커스를 획득하면 발생

함수를 파라미터로 받으며 요소가 포커스를 가지면 호출(상속)

반환 값은 없다.

 

사용 형식:

 

$(selector).focusin(function)

 

 

 

 

 

focusout()

form의 요소가 포커스를 잃으면 발생

함수를 파라미터로 받으며 요소가 포커스를 가지면 호출(상속)

반환 값은 없다.

 

사용 형식:

$(selector).focusout(function)

 

 

focusin(), focusout() 함께 사용하여 테스트

 

예제 코드)

 

실행결과