jQuery Event - Form Events
| .focus() | 요소에 포커스 되었을 때 발생하는 이벤트 |
| .blur() | 요소에서 포커스를 잃을 경우에 발생하는 이벤트 |
| .change() | <input />, <textarea />, <select /> 요소의 값 변경 시 발생하는 이벤트 |
| .select() | 선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트 |
| .submit() | Submit이 일어날 때(서식이 전송될 때) 발생하는 이벤트, return false로 서식 전송을 막을 수 있다. |
[ .focus( handler(eventObject) ) ]
focus 이벤트는 요소가 포커스를 획득하면 발생한다.
handler(eventObject) 이벤트가 발생하면 실행될 기능
.focus( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생하면 실행될 기능
.focus()
form 요소들(<input>, <select>, etc.) 과 링크들 (<a href>) 같은 요소의 제한된 집합에 암시적으로 적용된다. 최근 브라우저 버전에서는 명시적으로 요소의 tabindex 속성을 설정하여 이벤트를 모든 요소 유형에 포함하도록 확장할 수 있게 되었다.
점을 맞춘 요소는 일반적으로 요소를 둘러싼 점선이 표시되는 형태처럼 브라우저에 의해 강조가 된다. focus는 키보드 관련 이벤트를 받을 수 있는 첫 번째 요소를 결정하는 데 사용된다.
[ .focus() 사용 예제 ]
<head>
<title>jQuery</title>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
});
</script>
</head>
<body style="padding:10px;">
<p><input type="text" /> <span>focus is in text </span></p>
<p><input type="password" /> <span>focus is in password </span></p>
</body>
</html>
focus is in text
focus is in password
위의 실행화면을 보면 알 수 있듯이 text나 password에 마우스를 클릭해보면 현재 포커스가 위치한 곳 오른쪽에 메시지가 나타난다.
[ .blur( handler(eventObject) ) ]
.focus()와는 반대로 요소가 포커스를 잃을 경우에 발생하는 이벤트
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행된다.
.blur( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합.
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행된다.
.blur( )
blur 이벤트는 요소(element)에서 포커스를 없어질 때 발생한다.
원래, 이 이벤트는 <input>와 같은 폼 요소 전용였으나, 브라우져가 발전하면서 모든 타입이 요소에서 사용할 수 있도록 확장되었다.
Tab키 같은 키보드에 의해서 포커스를 잃을 수도 있고, 페이지 상의 다른 부분을 마우스로 클릭되면서 포커스를 잃기도 한다.
[ .blur() 사용 예제 ]
$(document).ready(function () {
$("input").blur(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
});
</script>
.focus()의 소스를 위와 같이 변경하여 테스트하면 .focus()의 동작과는 다르게 포커스를 잃을 때 오른쪽메시지가 출력된다.
[ .change( handler(EventObject) ) ]
<input />, <textarea />, <select /> 요소의 값 변경 시 발생하는 이벤트
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행된다.
.change( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합.
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행된다.
.change( )
change 이벤트는 요소(element)의 값이 변경될 때 발생
원래, 이 이벤트는 <input>, <textarea>, <select> 와 같은 폼 요소 전용이었다.
select, checkbox, radio 버튼들을 마우스로 선택하여 상태값을 바꾸는 즉시 이벤트가 발생하지만, 그 외의 다른 요소들은 값을 변경하고 포커스를 잃을 때 이벤트가 발생한다.
[ .change() 사용 예제 ]
<head>
<title>jQuery</title>
<style> div { color:red; } </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();
});
</script>
</head>
<body style="padding:10px;">
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
</body>
</html>
select박스에서 선택을 하게 되면 하단에 선택된 것에 대한 값이 출력된다.
[ .select( handler(eventObject) ) ]
선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트
handler(eventObject) 이벤트가 발생하면 실행될 기능.
.select( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 맵.
handler(eventObject) ) 이벤트가 발생하면 실행될 기능.
.select()
'Programming > JQuery' 카테고리의 다른 글
| jQuery Event - .bind() & .unbind() (0) | 2012.04.24 |
|---|---|
| jQuery Event - Document loading (0) | 2012.04.24 |
| jQuery Event - Keyboard Events (0) | 2012.04.23 |
| jQuery Event - Mouse Events (0) | 2012.04.23 |
| jQuery Event (0) | 2012.04.23 |
